feat(map): play zone music when available

package.json

@@ -35,7 +35,7 @@
     "three.js"
   ],
   "dependencies": {
-    "@wowserhq/format": "^0.17.0"
+    "@wowserhq/format": "^0.18.0"
   },
   "peerDependencies": {
     "three": "^0.160.0"

src/lib/index.ts

@@ -4,5 +4,6 @@ export * from './db/DbManager.js';
 export * from './light/SceneLight.js';
 export * from './map/MapManager.js';
 export * from './model/ModelManager.js';
+export * from './sound/SoundManager.js';
 export * from './texture/TextureManager.js';
 export * from './util.js';

src/lib/map/MapManager.ts

@@ -16,6 +16,7 @@ import MapLoader from './loader/MapLoader.js';
 import { MapAreaSpec, MapSpec } from './loader/types.js';
 import MapLight from './light/MapLight.js';
 import DbManager from '../db/DbManager.js';
+import SoundManager from '../sound/SoundManager.js';
 
 const DEFAULT_VIEW_DISTANCE = 1277.0;
 const DETAIL_DISTANCE_EXTENSION = MAP_CHUNK_HEIGHT;
@@ -24,6 +25,7 @@ type MapManagerOptions = {
   host: AssetHost;
   textureManager?: TextureManager;
   dbManager?: DbManager;
+  soundManager?: SoundManager;
   viewDistance?: number;
 };
 
@@ -44,6 +46,7 @@ class MapManager extends EventTarget {
   #terrainManager: TerrainManager;
   #doodadManager: DoodadManager;
   #dbManager: DbManager;
+  #soundManager: SoundManager;
 
   #mapLight: MapLight;
 
@@ -75,6 +78,8 @@ class MapManager extends EventTarget {
 
     this.#textureManager = options.textureManager ?? new TextureManager({ host: options.host });
     this.#dbManager = options.dbManager ?? new DbManager({ host: options.host });
+    this.#soundManager =
+      options.soundManager ?? new SoundManager({ host: options.host, dbManager: this.#dbManager });
     this.#loader = new MapLoader({ host: options.host });
 
     this.#mapLight = new MapLight({ dbManager: this.#dbManager });
@@ -160,7 +165,7 @@ class MapManager extends EventTarget {
     }
 
     if (previousAreaTableId !== this.#targetAreaTableId) {
-      this.#handleAreaTableIdChange();
+      this.#handleAreaTableChange();
     }
   }
 
@@ -198,7 +203,7 @@ class MapManager extends EventTarget {
     }
   }
 
-  #handleAreaTableIdChange() {
+  #handleAreaTableChange() {
     if (!this.#areaTableDb || !this.#targetAreaTableId) {
       return;
     }
@@ -210,6 +215,12 @@ class MapManager extends EventTarget {
 
     const parentAreaTableRecord = this.#areaTableDb.getRecord(areaTableRecord.parentAreaId);
 
+    // Sound
+
+    this.#soundManager.setZoneMusic(areaTableRecord.zoneMusic);
+
+    // Event
+
     const detail = {
       areaName: areaTableRecord.areaName,
       areaId: areaTableRecord.id,

src/lib/sound/SoundManager.ts

@@ -0,0 +1,151 @@
+import * as THREE from 'three';
+import { ClientDb, SoundEntriesRecord, ZoneMusicRecord } from '@wowserhq/format';
+import DbManager from '../db/DbManager.js';
+import { AssetHost, loadAsset, normalizePath } from '../asset.js';
+import ZoneMusic from './ZoneMusic.js';
+import zoneMusic from './ZoneMusic.js';
+
+type SoundManagerOptions = {
+  host: AssetHost;
+  dbManager?: DbManager;
+};
+
+class SoundManager {
+  #host: AssetHost;
+
+  #loadedSounds = new Map<string, AudioBuffer>();
+  #loadingSounds = new Map<string, Promise<AudioBuffer>>();
+
+  #context: AudioContext;
+  #listener: THREE.AudioListener;
+  #camera: THREE.Camera;
+
+  #dbManager: DbManager;
+  #zoneMusicDb: ClientDb<ZoneMusicRecord>;
+  #soundEntriesDb: ClientDb<SoundEntriesRecord>;
+
+  #desiredZoneMusicId: number;
+  #currentZoneMusicId: number;
+  #zoneMusic: ZoneMusic;
+
+  #musicSource: THREE.Audio;
+
+  constructor(options: SoundManagerOptions) {
+    this.#host = options.host;
+    this.#dbManager = options.dbManager ?? new DbManager({ host: options.host });
+
+    this.#context = THREE.AudioContext.getContext();
+    this.#listener = new THREE.AudioListener();
+    this.#musicSource = new THREE.Audio(this.#listener);
+    this.#zoneMusic = new ZoneMusic(this.#musicSource);
+
+    this.#loadDbs().catch((error) => console.error(error));
+    this.#syncZoneMusic().catch((error) => console.error(error));
+  }
+
+  get camera() {
+    return this.#camera;
+  }
+
+  set camera(camera: THREE.Camera) {
+    this.#camera = camera;
+    this.#camera.add(this.#listener);
+  }
+
+  setZoneMusic(zoneMusicId: number) {
+    this.#desiredZoneMusicId = zoneMusicId;
+  }
+
+  async #loadDbs() {
+    this.#zoneMusicDb = await this.#dbManager.get('ZoneMusic.dbc', ZoneMusicRecord);
+    this.#soundEntriesDb = await this.#dbManager.get('SoundEntries.dbc', SoundEntriesRecord);
+  }
+
+  async #syncZoneMusic() {
+    if (!this.#zoneMusicDb || !this.#soundEntriesDb) {
+      requestAnimationFrame(() => this.#syncZoneMusic().catch((error) => console.error(error)));
+      return;
+    }
+
+    if (this.#desiredZoneMusicId !== this.#currentZoneMusicId) {
+      await this.#updateZoneMusic(this.#desiredZoneMusicId);
+    }
+
+    requestAnimationFrame(() => this.#syncZoneMusic().catch((error) => console.error(error)));
+  }
+
+  async #updateZoneMusic(zoneMusicId: number) {
+    if (this.#currentZoneMusicId === zoneMusicId) {
+      return;
+    }
+
+    // Let current zone music finish gracefully
+    this.#zoneMusic.suspend();
+
+    const musicRecord = this.#zoneMusicDb.getRecord(zoneMusicId);
+    if (!musicRecord) {
+      this.#currentZoneMusicId = zoneMusicId;
+      return;
+    }
+
+    const soundRecords = musicRecord.sounds.map((soundEntriesId) =>
+      this.#soundEntriesDb.getRecord(soundEntriesId),
+    );
+
+    const sounds = {};
+    for (const soundRecord of soundRecords) {
+      for (const file of soundRecord.file) {
+        if (file.trim().length === 0) {
+          continue;
+        }
+
+        const path = `${soundRecord.directoryBase}\\${file.trim()}`;
+        const buffer = await this.#getSound(path);
+        sounds[file] = buffer;
+      }
+    }
+
+    this.#zoneMusic.update(musicRecord, soundRecords, sounds);
+
+    // Resume with new zone music
+    this.#zoneMusic.resume();
+
+    this.#currentZoneMusicId = zoneMusicId;
+  }
+
+  #getSound(path: string): Promise<AudioBuffer> {
+    const refId = normalizePath(path);
+
+    const loaded = this.#loadedSounds.get(refId);
+    if (loaded) {
+      return Promise.resolve(loaded);
+    }
+
+    const alreadyLoading = this.#loadingSounds.get(refId);
+    if (alreadyLoading) {
+      return alreadyLoading;
+    }
+
+    const loading = this.#loadSound(refId, path);
+    this.#loadingSounds.set(refId, loading);
+
+    return loading;
+  }
+
+  async #loadSound(refId: string, path: string) {
+    let buffer: AudioBuffer;
+    try {
+      const data = await loadAsset(this.#host, path);
+      buffer = await this.#context.decodeAudioData(data);
+
+      this.#loadedSounds.set(refId, buffer);
+    } finally {
+      this.#loadingSounds.delete(refId);
+    }
+
+    return buffer;
+  }
+}
+
+export default SoundManager;
+export { SoundManager };

src/lib/sound/ZoneMusic.ts

@@ -0,0 +1,92 @@
+import * as THREE from 'three';
+import { SoundEntriesRecord, ZoneMusicRecord } from '@wowserhq/format';
+import { SOUND_AMBIENCE } from './const.js';
+import { getRandomInt } from './util.js';
+
+class ZoneMusic {
+  #musicRecord: ZoneMusicRecord;
+  #soundRecords: SoundEntriesRecord[];
+  #sounds: Record<string, AudioBuffer>;
+  #ambience: SOUND_AMBIENCE;
+  #audioSource: THREE.Audio;
+  #scheduleTimeout: ReturnType<typeof setTimeout>;
+  #lastPlayed: number;
+
+  constructor(audioSource: THREE.Audio) {
+    this.#audioSource = audioSource;
+    this.#ambience = SOUND_AMBIENCE.AMBIENCE_DAY;
+  }
+
+  get ambience() {
+    return this.#ambience;
+  }
+
+  set ambience(ambience: SOUND_AMBIENCE) {
+    this.#ambience = ambience;
+  }
+
+  resume() {
+    this.#schedule();
+  }
+
+  stop() {
+    this.#audioSource.stop();
+    this.#audioSource.onEnded = null;
+
+    this.suspend();
+  }
+
+  suspend() {
+    clearTimeout(this.#scheduleTimeout);
+    this.#scheduleTimeout = null;
+  }
+
+  update(
+    musicRecord: ZoneMusicRecord,
+    soundRecords: SoundEntriesRecord[],
+    sounds: Record<string, AudioBuffer>,
+  ) {
+    this.#musicRecord = musicRecord;
+    this.#soundRecords = soundRecords;
+    this.#sounds = sounds;
+  }
+
+  #play() {
+    const soundEntries = this.#soundRecords[this.#ambience];
+    const soundFiles = soundEntries.file.filter((file) => file.trim().length > 0);
+
+    // TODO use freq as weight
+    const soundFile = soundFiles[getRandomInt(0, soundFiles.length - 1)];
+
+    const soundBuffer = this.#sounds[soundFile];
+    this.#audioSource.setBuffer(soundBuffer);
+
+    this.#audioSource.onEnded = () => {
+      this.#audioSource.isPlaying = false;
+      this.#lastPlayed = Date.now();
+      this.#scheduleTimeout = null;
+
+      this.#schedule();
+    };
+
+    this.#audioSource.play();
+  }
+
+  #schedule() {
+    if (this.#audioSource.isPlaying || this.#scheduleTimeout) {
+      return;
+    }
+
+    const silenceMin = this.#musicRecord.silenceIntervalMin[this.#ambience];
+    const silenceMax = this.#musicRecord.silenceIntervalMax[this.#ambience];
+    const silence = getRandomInt(silenceMin, silenceMax);
+
+    // Truncate silence by last played
+    const elapsed = this.#lastPlayed ? Date.now() - this.#lastPlayed : 0;
+    const delay = Math.max(silence - elapsed, 0);
+
+    this.#scheduleTimeout = setTimeout(() => this.#play(), delay);
+  }
+}
+
+export default ZoneMusic;

src/lib/sound/const.ts

@@ -0,0 +1,7 @@
+enum SOUND_AMBIENCE {
+  AMBIENCE_DAY = 0,
+  AMBIENCE_NIGHT,
+  AMBIENCE_COUNT,
+}
+
+export { SOUND_AMBIENCE };

src/lib/sound/util.ts

@@ -0,0 +1,7 @@
+const getRandomInt = (min: number, max: number) => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+export { getRandomInt };