arcade audio to start using web audio

games/masterplan/src/screens/battle/game/game-world.ts

@@ -196,4 +196,4 @@ export class GameWorld {
       } as Record<string, number>,
     );
   }
-}
+}

games/masterplan/src/screens/battle/util/arcade-audio.js

@@ -1,37 +1,63 @@
 import { jsfxr } from '../lib/jsfxr';
 
-/** @constructor */
-export function ArcadeAudio() {
-  this.sounds = {};
-}
+export class ArcadeAudio {
+  constructor() {
+    this.sounds = {};
+    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  }
+
+  async add(key, count, settings) {
+    this.sounds[key] = [];
+    for (let settingIndex = 0; settingIndex < settings.length; settingIndex++) {
+      const soundData = {
+        tick: 0,
+        count: count,
+        buffers: [],
+      };
+
+      for (let i = 0; i < count; i++) {
+        const audioData = jsfxr(settings[settingIndex]);
+        const arrayBuffer = await this.base64ToArrayBuffer(audioData);
+        const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+        soundData.buffers.push(audioBuffer);
+      }
 
-ArcadeAudio.prototype.add = function (key, count, settings) {
-  this.sounds[key] = [];
-  settings.forEach(function (elem, index) {
-    this.sounds[key].push({
-      tick: 0,
-      count: count,
-      pool: [],
-    });
-    for (var i = 0; i < count; i++) {
-      var audio = new Audio();
-      audio.src = jsfxr(elem);
-      this.sounds[key][index].pool.push(audio);
+      this.sounds[key].push(soundData);
     }
-  }, this);
-};
+  }
 
-ArcadeAudio.prototype.play = function (key) {
-  var sound = this.sounds[key];
-  var soundData = sound.length > 1 ? sound[Math.floor(Math.random() * sound.length)] : sound[0];
-  soundData.pool[soundData.tick].play();
-  soundData.tick < soundData.count - 1 ? soundData.tick++ : (soundData.tick = 0);
-};
+  play(key) {
+    const sound = this.sounds[key];
+    const soundData = sound.length > 1 ? sound[Math.floor(Math.random() * sound.length)] : sound[0];
+
+    const source = this.audioContext.createBufferSource();
+    source.buffer = soundData.buffers[soundData.tick];
+
+    const gainNode = this.audioContext.createGain();
+    source.connect(gainNode);
+    gainNode.connect(this.audioContext.destination);
+
+    source.start(0);
+
+    soundData.tick < soundData.count - 1 ? soundData.tick++ : (soundData.tick = 0);
+  }
+
+  async base64ToArrayBuffer(base64) {
+    const base64Data = base64.split(',')[1];
+    const binaryString = atob(base64Data);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+}
 
 export const aa = new ArcadeAudio();
 
 aa.add('arrow', 10, [
   [0, 0.13, 0.12, 0.21, 0.28, 0.7097, 0.11, 0.4399, , , , 0.2845, 0.6608, , , , , , 1, , , , , 0.32],
 ]);
 aa.add('hitarrow', 10, [[2, , 0.0664, , 0.1176, 0.7984, , -0.5791, , , , , , , , , , , 1, , , 0.0922, , 0.47]]);
-aa.add('damage', 10, [[3, , 0.0421, , 0.1467, 0.7815, , -0.4846, , , , , , 0.4464, , , , , 1, , , 0.2247, , 0.47]]);
+aa.add('damage', 10, [[3, , 0.0421, , 0.1467, 0.7815, , -0.4846, , , , , , 0.4464, , , , , 1, , , 0.2247, , 0.47]]);