Adding Background Music to Puzzlescript Games

Screen shot from the video game 'Return of the Dead Pixels' showing zombies

Step 1: Make a Puzzlescript game and export it as HTML.

Step 2: Add a toggle switch (a checkbox) inside of the HTML body. Preferably right after the opening <body> tag.

<label for="musicToggle"><input type="checkbox" id="musicToggle" name="musicToggle" onclick="playBgMusic()" checked>🎵</label>

Step 3: Add the audio component and the Javascript code. Preferably right before the closing </body> tag. Change YOUR-FILE-NAME-HERE.mp3 to the name of your music file.

<audio id="audio" controls style="display:none">
  <source src="YOUR-FILE-NAME-HERE.mp3" type="audio/mpeg"> Your browser does not support the audio element.
  function playBgMusic(){
  document.addEventListener('keyup', playBgMusic);  
  document.addEventListener("click", playBgMusic);

Step 4: THAT’S IT!

Check it out by playing Return Of The Dead Pixels, my Puzzlescript zombie game:

Screen shot from the video game 'Return of the Dead Pixels' showing player surrounded by zombies