No arcade action game is complete without some pumping background music to make you feel like you’re in space. In this task we will add sound background audio to our game so that the player feels more immersed in the setting.

Task Definition

In this task we’re simply going to add a music file to the game and set it playing as soon as the game starts.

  1. Add the audio file to your project folder.
  2. Preload the audio like you would an image, but using game.load.audio(name, path) instead of load.image.
  3. Create an audio object in your game using this.music = game.add.audio(name);.
  4. Use the audio object to play your music using this.music.play();.

Walkthrough

1. Add the Audio to your Project

As with many of the other tasks, the first step is to add the music files you want to play to your game. A good place for them is;

assets/music/...

You’re welcome to use the music files that come bundled with the asset pack or you can head online and grab your own audio files if you would prefer! You can use .ogg or .mp3 files for the background music (although .mp3 files don’t always work in FireFox, they’re fine for this project).

2. Preload the Audio

Just like when you preload images, you also need to preload the audio that your game will play. You can do so with the following method;

game.load.audio(name, path);

3. Play the Audio

Playing audio is similar to adding sprites to the world - only music requires an extra step. First, you need to add an ‘Audio Object’ to the game world which gives you control over the sound effect you want to play. You can use the audio object to start or stop the audio as well as changing the volume. One of the bonus quests will see you changing the music volume of the music depending on how busy the action is at the moment!

The following code snippets will come in handy when playing music in the game.

this.music = game.add.audio(name);
this.music.play();

Extensions

  • Try setting the volume property on the music to change the volume between 0 and 1.
  • You probably want to set the music to loop using the loop (boolean) property.
  • You might want to consider adding a few different music tracks to your game and play one at random when the game starts.

Task Solution

This snippet shows just the changes that need to be added to your code to complete this task;

mainGameState.preload = function() {
    ...
    game.load.audio("game-music", "assets/music/maingame.mp3");
},
  
mainGameState.create = function() {
    ...
    this.music = game.add.audio("game-music");
    this.music.play();
    this.music.volume = 0.5;
    this.music.loop = true;     
}

If you have been following the standard solution from the previous step, the full code for your maingamestate.js should look something like this;

var mainGameState = { } 

mainGameState.preload = function() {
    console.log("Pre-loading the game!");
    
    game.load.image("space-bg", "assets/images/space-bg.jpg");
    game.load.image("player-ship", "assets/images/player-ship.png");
    
    game.load.audio("game-music", "assets/music/maingame.mp3");    
}

mainGameState.create = function() {
    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.add.sprite(0, 0, "space-bg");

    var shipX = game.width * 0.5;
    var shipY = game.height * 0.8;

    this.cursors = game.input.keyboard.createCursorKeys();        

    this.playerShip = game.add.sprite(shipX, shipY, 'player-ship');
    this.playerShip.anchor.setTo(0.5, 0.5);
    game.physics.arcade.enable(this.playerShip);
    
    this.music = game.add.audio("game-music");
    this.music.play();
    this.music.volume = 0.5;
    this.music.loop = true;      
}

mainGameState.update = function() {
    if ( this.cursors.left.isDown ) {
        this.playerShip.body.velocity.x = -200;
    } else if ( this.cursors.right.isDown ) {
        this.playerShip.body.velocity.x = 200;
    } else {
        this.playerShip.body.velocity.x = 0;
    }
}