Use pulsed city map loading sound

index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>World Citybook | 全球「城市路书」地图</title>
     <link rel="icon" href="data:," />
-    <link rel="stylesheet" href="src/styles.css?v=20260712-predeploy-190" />
-    <link rel="stylesheet" href="src/ticket-clip.css?v=20260712-predeploy-190" />
+    <link rel="stylesheet" href="src/styles.css?v=20260712-predeploy-191" />
+    <link rel="stylesheet" href="src/ticket-clip.css?v=20260712-predeploy-191" />
   </head>
   <body>
     <main class="atlas-shell">
@@ -271,6 +271,6 @@
         retinaTiles: true,
       };
     </script>
-    <script type="module" src="src/app.js?v=20260712-predeploy-190"></script>
+    <script type="module" src="src/app.js?v=20260712-predeploy-191"></script>
   </body>
 </html>

src/app.js

@@ -6,21 +6,21 @@ import {
   CITY_MAP_BOOK_TOP_FORBIDDEN_BOTTOM,
   cityMapBookTopForbiddenBottom,
   hasCompleteCityMapSpecialBookLayout,
-} from "./cityMapBookLayout.js?v=20260712-predeploy-190";
+} from "./cityMapBookLayout.js?v=20260712-predeploy-191";
 import {
   applySnapToGuides,
-} from "./layoutWorkbenchCore.js?v=20260712-predeploy-190";
+} from "./layoutWorkbenchCore.js?v=20260712-predeploy-191";
 import {
   buildCityTileUrl,
   normalizeCityTileStyles,
   resolveCityTileProvider,
   runtimeCityTileConfig,
-} from "./tileProviders.js?v=20260712-predeploy-190";
+} from "./tileProviders.js?v=20260712-predeploy-191";
 import {
   SPECIAL_BOOK_OFFSETS,
   SPECIAL_CATEGORY_STACK_OFFSETS,
   SPECIAL_DEFINITIONS,
-} from "./specialConfig.js?v=20260712-predeploy-190";
+} from "./specialConfig.js?v=20260712-predeploy-191";
 import {
   SHARE_HALFTONE_DOT_RULE,
   shareHalftoneCropRect,
@@ -31,7 +31,7 @@ import {
   shareHalftoneNoisyTone,
   shareHalftonePlateColors,
   shareHalftoneSamplePoint,
-} from "./shareHalftone.js?v=20260712-predeploy-190";
+} from "./shareHalftone.js?v=20260712-predeploy-191";
 import {
   SAVED_BOOKS_STORAGE_KEY,
   buildFixedShelfRows,
@@ -39,23 +39,23 @@ import {
   paginateShelfItems,
   removeSavedBook,
   upsertSavedBook,
-} from "./savedBookshelf.js?v=20260712-predeploy-190";
+} from "./savedBookshelf.js?v=20260712-predeploy-191";
 import {
   bookshelfLocationLabel,
   combinedLocationHeading,
   locationHeading,
-} from "./locationLabels.js?v=20260712-predeploy-190";
+} from "./locationLabels.js?v=20260712-predeploy-191";
 import {
   SEARCH_PINYIN_ALIASES,
   SEARCH_TOPIC_GROUPS,
   SEARCH_TOPIC_ALIASES,
   deriveSearchTopicAliasMatchesFromText,
   deriveSearchTopicsFromText,
-} from "./searchTopics.js?v=20260712-predeploy-190";
+} from "./searchTopics.js?v=20260712-predeploy-191";
 import {
   initAnalytics,
   trackEvent,
-} from "./analytics.js?v=20260712-predeploy-190";
+} from "./analytics.js?v=20260712-predeploy-191";
 
 const VIEWBOX = { width: 1440, height: 920 };
 const BASE_RADIUS = 430;
@@ -502,7 +502,7 @@ const mapData = {
 let specialDataLoadPromise = null;
 const specialDataLoadPromises = new Map();
 
-const DATA_VERSION = "20260712-predeploy-190";
+const DATA_VERSION = "20260712-predeploy-191";
 const SHARE_HALFTONE_REVEAL_WAIT_MS = 1100;
 const SHARE_HALFTONE_CACHE_LIMIT = 10;
 const SHARE_HALFTONE_PREWARM_TIMEOUT_MS = 350;
@@ -1006,7 +1006,7 @@ function playCoinCollectSound() {
 function playCityMapLoadingSound() {
   withAudioContext((context) => {
     const now = context.currentTime;
-    stopCityMapLoadingSound({ fadeDuration: 0.08 });
+    stopCityMapLoadingSound({ fadeDuration: 0.08, finalPulses: 0 });
     playCityMapLoadingIntroSound(context, now);
     startCityMapLoadingLoop(context, now + 0.18);
   });
@@ -1022,52 +1022,50 @@ function playCityMapLoadingIntroSound(context, now = context.currentTime) {
 function startCityMapLoadingLoop(context, startAt = context.currentTime) {
   const masterGain = context.createGain();
   masterGain.gain.setValueAtTime(0.0001, startAt);
-  masterGain.gain.exponentialRampToValueAtTime(1, startAt + 0.42);
+  masterGain.gain.exponentialRampToValueAtTime(1, startAt + 0.18);
   masterGain.connect(context.destination);
 
-  const lowOscillator = context.createOscillator();
-  const lowGain = context.createGain();
-  lowOscillator.type = "sine";
-  lowOscillator.frequency.setValueAtTime(164.81, startAt);
-  lowGain.gain.setValueAtTime(0.0048, startAt);
-  lowOscillator.connect(lowGain).connect(masterGain);
-
-  const shimmerOscillator = context.createOscillator();
-  const shimmerGain = context.createGain();
-  shimmerOscillator.type = "triangle";
-  shimmerOscillator.frequency.setValueAtTime(329.63, startAt);
-  shimmerGain.gain.setValueAtTime(0.0028, startAt);
-  shimmerOscillator.connect(shimmerGain).connect(masterGain);
-
-  const pulseOscillator = context.createOscillator();
-  const pulseDepth = context.createGain();
-  pulseOscillator.type = "sine";
-  pulseOscillator.frequency.setValueAtTime(0.72, startAt);
-  pulseDepth.gain.setValueAtTime(0.0015, startAt);
-  pulseOscillator.connect(pulseDepth).connect(shimmerGain.gain);
-
-  const noiseSource = createLoopingNoiseSource(context, 1.2);
-  const noiseFilter = context.createBiquadFilter();
-  const noiseGain = context.createGain();
-  noiseFilter.type = "bandpass";
-  noiseFilter.frequency.setValueAtTime(680, startAt);
-  noiseFilter.Q.setValueAtTime(0.56, startAt);
-  noiseGain.gain.setValueAtTime(0.0024, startAt);
-  noiseSource.connect(noiseFilter).connect(noiseGain).connect(masterGain);
-
-  [lowOscillator, shimmerOscillator, pulseOscillator, noiseSource].forEach((source) => source.start(startAt));
-  state.audio.cityMapLoading = {
+  const loading = {
     context,
     masterGain,
-    sources: [lowOscillator, shimmerOscillator, pulseOscillator, noiseSource],
+    pulseIndex: 0,
+    remainingFadePulses: 0,
+    stopping: false,
+    stopped: false,
+    pulseTimer: null,
     stopTimer: null,
   };
+  state.audio.cityMapLoading = loading;
+  scheduleCityMapLoadingPulse(loading, Math.max(0, (startAt - context.currentTime) * 1000));
+}
+
+function scheduleCityMapLoadingPulse(loading, delayMs = 0) {
+  if (!loading || loading.stopped) return;
+  loading.pulseTimer = window.setTimeout(() => {
+    if (loading.stopped) return;
+    if (loading.stopping && loading.remainingFadePulses <= 0) return;
+    playCityMapLoadingPulse(loading.context, loading.masterGain, loading.context.currentTime, loading.pulseIndex);
+    loading.pulseIndex += 1;
+    if (loading.stopping) loading.remainingFadePulses -= 1;
+    if (!loading.stopping || loading.remainingFadePulses > 0) {
+      scheduleCityMapLoadingPulse(loading, loading.stopping ? 285 : 365);
+    }
+  }, delayMs);
+}
+
+function playCityMapLoadingPulse(context, destination, startAt, index = 0) {
+  const notes = [329.63, 392, 369.99, 440];
+  const base = notes[index % notes.length];
+  playToneLayer(context, startAt, "sine", base, base * 1.12, 0.105, 0.0075, destination);
+  playToneLayer(context, startAt + 0.018, "triangle", base * 1.98, base * 2.22, 0.085, 0.0038, destination);
 }
 
 function stopCityMapLoadingSound(options = {}) {
   const loading = state.audio.cityMapLoading;
   if (!loading) return;
-  state.audio.cityMapLoading = null;
+  loading.stopping = true;
+  loading.remainingFadePulses = Math.max(0, options.finalPulses ?? 2);
+  if (loading.pulseTimer) window.clearTimeout(loading.pulseTimer);
   if (loading.stopTimer) window.clearTimeout(loading.stopTimer);
 
   const fadeDuration = Math.max(0.04, options.fadeDuration ?? 0.9);
@@ -1076,35 +1074,15 @@ function stopCityMapLoadingSound(options = {}) {
   loading.masterGain.gain.cancelScheduledValues(now);
   loading.masterGain.gain.setValueAtTime(Math.max(loading.masterGain.gain.value, 0.0001), now);
   loading.masterGain.gain.exponentialRampToValueAtTime(0.0001, now + fadeDuration);
+  if (loading.remainingFadePulses > 0) scheduleCityMapLoadingPulse(loading, 0);
   loading.stopTimer = window.setTimeout(() => {
-    loading.sources.forEach((source) => {
-      try {
-        source.stop();
-      } catch (error) {
-        // Source may already have been stopped by the browser after a rapid view switch.
-      }
-    });
+    loading.stopped = true;
+    if (loading.pulseTimer) window.clearTimeout(loading.pulseTimer);
     loading.masterGain.disconnect();
+    if (state.audio.cityMapLoading === loading) state.audio.cityMapLoading = null;
   }, Math.ceil((fadeDuration + 0.04) * 1000));
 }
 
-function createLoopingNoiseSource(context, duration) {
-  const sampleRate = context.sampleRate;
-  const frameCount = Math.max(1, Math.floor(sampleRate * duration));
-  const buffer = context.createBuffer(1, frameCount, sampleRate);
-  const samples = buffer.getChannelData(0);
-  let previous = 0;
-  for (let index = 0; index < frameCount; index += 1) {
-    const white = Math.random() * 2 - 1;
-    previous = previous * 0.86 + white * 0.14;
-    samples[index] = previous;
-  }
-  const source = context.createBufferSource();
-  source.buffer = buffer;
-  source.loop = true;
-  return source;
-}
-
 function playRadioControlSound() {
   withAudioContext((context) => {
     const now = context.currentTime;
@@ -1113,7 +1091,7 @@ function playRadioControlSound() {
   });
 }
 
-function playToneLayer(context, startAt, type, startFrequency, endFrequency, duration, peakGain) {
+function playToneLayer(context, startAt, type, startFrequency, endFrequency, duration, peakGain, destination = context.destination) {
   const oscillator = context.createOscillator();
   const gain = context.createGain();
   oscillator.type = type;
@@ -1122,7 +1100,7 @@ function playToneLayer(context, startAt, type, startFrequency, endFrequency, dur
   gain.gain.setValueAtTime(0.0001, startAt);
   gain.gain.exponentialRampToValueAtTime(peakGain, startAt + 0.012);
   gain.gain.exponentialRampToValueAtTime(0.0001, startAt + duration);
-  oscillator.connect(gain).connect(context.destination);
+  oscillator.connect(gain).connect(destination);
   oscillator.start(startAt);
   oscillator.stop(startAt + duration + 0.02);
 }
@@ -8110,7 +8088,9 @@ async function snapshotShareStyles() {
   background: transparent !important;
 }
 [data-share-snapshot] .share-ticket-shell {
-  filter: none !important;
+  filter:
+    drop-shadow(0 0 18px rgba(45, 48, 43, 0.15))
+    drop-shadow(0 12px 32px rgba(45, 48, 43, 0.1)) !important;
 }
 [data-share-snapshot] .share-preview__canvas .share-ticket {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;