Background music support

src/main.js

@@ -3,7 +3,7 @@ import {createCanvas, drawLine, drawRect, drawText, loop, plot, drawLineVirtual}
 import {key, afterKeyDelay} from './input.js';
 import {clamp, deg2rad, parable, randomInt, vec, wrap, random, within} from './math.js';
 import {createSky} from './sky.js';
-import {audio, createOsc, playTickSound} from './sound.js';
+import {audio, createOsc, playTickSound, createAudioLoop} from './sound.js';
 import {collapseTerrain, createTerrain, isTerrain, landHeight, closestLand, clipTerrain} from './terrain.js';
 import {EXPLOSION_TYPES} from './weapons.js';
 import {sample} from './utils.js';
@@ -26,6 +26,7 @@ const sky = createSky(W, H);
 const traces = createCanvas(W, H);
 const terrain = createTerrain(W, H);
 const foreground = createCanvas(W, H);
+// const music = createAudioLoop('assets/battle.mp3');
 
 for (let c of [sky, traces, terrain, foreground]) {
   c.canvas.style.width = `${W * Z}px`;

src/sound.js

@@ -1,13 +1,30 @@
 // @ts-ignore
 export const audio = new (window.AudioContext || window.webkitAudioContext)();
-export const gain = audio.createGain(audio);
-gain.gain.setValueAtTime(0.05, audio.currentTime);
-gain.connect(audio.destination);
+
+export const music = audio.createGain(audio);
+music.gain.setValueAtTime(0.4, audio.currentTime);
+music.connect(audio.destination);
+
+export const sfx = audio.createGain(audio);
+sfx.gain.setValueAtTime(0.05, audio.currentTime);
+sfx.connect(audio.destination);
+
+export async function createAudioLoop(src) {
+  const file = await fetch(src);
+  const buffer = await file.arrayBuffer();
+  const source = audio.createBufferSource();
+  audio.decodeAudioData(buffer, (buffer) => {
+    source.buffer = buffer;
+    source.connect(music);
+    source.loop = true;
+    source.start(0);
+  })
+}
 
 export function createOsc() {
   const osc = audio.createOscillator();
   osc.type = 'triangle';
-  osc.connect(gain);
+  osc.connect(sfx);
   return osc;
 }