So you want to add music?

• What am I doing here?
• Introduction
• I want it FAST

What am I doing here?

You may have noticed a few levels have music (my personal favorite being the “Regicide” track from the Destiny: The Taken King OST, but I digress), and maybe you want to add that. I had the pleasure of figuring that out and now I may share my knowledge. See this Pull Request

Introduction

Most of this capability comes from GameEnv.js with these static methods:

// ~/assets/js/platformer/GameEnv.js
// Play a sound by its ID
static playSound(id) {
    const sound = document.getElementById(id);
    sound.play();
}

// Play a sound by its ID in a loop
static loopSound(id) {
    const sound = document.getElementById(id);
    sound.loop = true;
    sound.play();
}

// Stop all sounds
static stopAllSounds() {
    const sounds = document.getElementsByTagName('audio');
    for (let sound of sounds) {
        sound.pause();
        sound.currentTime = 0;
    }
}

I wrote the bottom two methods if you’re curious. Anyway, I noticed that sound is played by its “ID”. Well, what the heck is the id and why is it loaded from HTML (notice the document.GetElementByID). Took me a but longer than I should, but these IDs are loaded into HTML itself in index.md:

<!--Index.md-->
<!--Audio for music -->

  <!--Audio for Everlong by Foo Fighters (Winter) -->
  <audio id="everlong" src="/platformer4x/assets/audio/everlong.mp3" preload="auto"></audio>

Ok, what does that do? Well, it loads a file from the filepath /platformer4x/assets/audio/evelong.mp3 and assigns it the id everlong. Boom.

Now, to play it on levels, I had to do a bit of a workaround. I didn’t know where to load it to be unique to levels, so in a VERY jank workaround, I played it in upon loading the background…. Yeah not the best practice, but who’ll know?

// ~/assets/js/platformer/BackgroundSnow.js
import Background from './Background.js';
import GameEnv from './GameEnv.js';

export class BackgroundSnow extends Background {
    constructor(canvas, image, data) {
        super(canvas, image, data);

        // Start the background music in loop
        GameEnv.loopSound('everlong');

        this.parallaxSpeed = 0.3; // Speed for vertical parallax scrolling
    }

Just import GameEnv and play the sound using loopSound to loop it or playSound if you just want to play it once.

I want it FAST

OK, OK, sorry for boring you with my frankly uninteresting story. Where’s the code?

1. Add an audio file to ~/assets/audio/. For example:

// ~/assets/audio/everlong.mp3

1. Load this audio file into HTML:

<!-- ~/index.md -->
<!--Audio for Everlong by Foo Fighters (Winter) -->
<audio id="everlong" src="/platformer4x/assets/audio/everlong.mp3" preload="auto"></audio>

1. Play the sound (here we use a music example):

// ~/assets/js/platformer/BackgroundSnow.js
import Background from './Background.js';
import GameEnv from './GameEnv.js';

export class BackgroundSnow extends Background {
    constructor(canvas, image, data) {
        super(canvas, image, data);

        // Start the background music in loop
        GameEnv.loopSound('everlong');

        this.parallaxSpeed = 0.3; // Speed for vertical parallax scrolling
    }

1. Done! Should work.

Some caveats though.

• All game sounds are automatically stopped upon level transition (I placed a GameEnv.stopAllSounds(); inside the transitionToLevel() function)
• You can loop sounds using loopSounds() which is recommended! I used playSound() just for sake of example (which is more applicable to other sounds)
• Choose good sounds/music please!

Potentia ex nihilo.