Add looping backing track

docs/assets/js/index.js

@@ -127,8 +127,6 @@ function absoluteDraw() {
 }
 
 function onAssetsLoaded() {
-
-
 }
 
 setup(60);

docs/assets/js/sounds/sounds.js

@@ -22,7 +22,8 @@ let soundAssetMap = {
     "heartbeat": "./assets/sounds/heartbeat.mp3",
     "inhale": "./assets/sounds/breathing/inhale.mp3",
     "exhale": "./assets/sounds/breathing/exhale.mp3",
-    "cough":"./assets/sounds/cough.mp3"
+    "cough": "./assets/sounds/cough.mp3",
+    "backingtrack": "./assets/sounds/backingtrack.wav"
 }
 
 // All available sounds
@@ -37,7 +38,8 @@ let soundAssets = {
     heartbeat: new SoundSnippet("heartbeat", audioAssetType.sfx),
     inhale: new SoundSnippet("inhale", audioAssetType.sfx),
     exhale: new SoundSnippet("exhale", audioAssetType.sfx),
-    cough: new SoundSnippet("cough", audioAssetType.sfx)
+    cough: new SoundSnippet("cough", audioAssetType.sfx),
+    backingtrack: new SoundSnippet("backingtrack", audioAssetType.bgm)
 }
 
 /**

docs/assets/js/sounds/soundsnippet.js

@@ -38,7 +38,7 @@ class SoundSnippet {
     cache(callback) {
 
         // Set the audio SRC
-        this.audio = new Howl({src:[this.assetPath]});
+        this.audio = new Howl({src:[this.assetPath], loop: (this.assetType == audioAssetType.bgm.bgm)});
 
         // Create a callback for loading finished
         this.audio.once("load", () => {
@@ -72,6 +72,24 @@ class SoundSnippet {
 
     }
 
+    playForever() {
+        // If autoplay is disabled, we notify the console
+        if (canPlayAudio()) {
+
+            console.log(`[SoundSnippet] Playing ${this.asset_name} forever`);
+
+
+            // Play the snippet
+            this.audio.play();
+
+            // Schedule a replay worker
+            setInterval(() => { this.audio.play(); console.log(`[SoundSnippet] Replaying ${this.asset_name}`) }, this.getLengthSeconds() * 1000);
+
+        } else {
+            console.warn("[SoundSnippet] Tried to play audio with autoplay disabled. The user must press the play button before you can play audio");
+        }
+    }
+
     stop() {
 
         // Stop the snippet
@@ -83,7 +101,7 @@ class SoundSnippet {
      * Get the sound length in seconds
      */
     getLengthSeconds() {
-        return this.audio.duration;
+        return this.audio.duration();
     }
 
     /**
@@ -99,4 +117,5 @@ class SoundSnippet {
     getHash() {
         return this.asset_hash;
     }
+
 }

docs/assets/js/titleScreen/titleScreen.js

@@ -2,60 +2,63 @@ var titleScreenState = "main"
 var cursor = mousePos;
 var timer = 0;
 
-function handleTitleScreen(){
-    
-    switch(titleScreenState){
-        
-        case("main"):
+function handleTitleScreen() {
+
+    switch (titleScreenState) {
+
+        case ("main"):
             handleMainScreen();
             break;
-        case("credits"):
+        case ("credits"):
             handleCredits();
             break;
 
 
 
     }
-    
-    
+
+
 }
 
 
-function handleMainScreen(){
-    if(timer > 20){
-        if(rectpoint({x:415, y:200, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+function handleMainScreen() {
+    if (timer > 20) {
+        if (rectpoint({ x: 415, y: 200, w: 300, h: 50 }, { x: cursor.x, y: cursor.y }) && mouseDown[0]) {
             globalState = globalStates.levelTransition;
             timer = 0;
+
+            // Play the bgm
+            soundAssets.backingtrack.playForever();
         }
-        if(rectpoint({x:415, y:550, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+        if (rectpoint({ x: 415, y: 550, w: 300, h: 50 }, { x: cursor.x, y: cursor.y }) && mouseDown[0]) {
             titleScreenState = "credits"
             timer = 0;
         }
-    }else{
+    } else {
         timer++;
     }
 }
 
 
-function handleCredits(){
+function handleCredits() {
 
-    if(timer > 20){
-        if(rectpoint({x:395, y:550, w: 140, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+    if (timer > 20) {
+        if (rectpoint({ x: 395, y: 550, w: 140, h: 50 }, { x: cursor.x, y: cursor.y }) && mouseDown[0]) {
             titleScreenState = "main";
             timer = 0;
         }
-    }else{
+    } else {
         timer++;
     }
-    
+
 
 }
 
 
 
-function drawTitleScreen(){
-    
-    if(titleScreenState === "main"){
+function drawTitleScreen() {
+
+    if (titleScreenState === "main") {
         text("GAME TITLE HERE", 50, 50, "green", 8, 1000);
         rect(415, 200, 300, 50, "green");
         text("Play!", 355, 185, "white", 5, 150);
@@ -64,7 +67,7 @@ function drawTitleScreen(){
         text("Credits", 325, 535, "white", 5, 150);
     }
 
-    if(titleScreenState === "credits"){
+    if (titleScreenState === "credits") {
         text("CREDITS", 250, 50, "green", 8, 300);