Audio

You can add sound effects and music to your game. Sounds can be looped, faded, paused, etc.

You can only use the following formats for Phaser audio files:

• .wav

• .mp3

• .ogg

If you find or create sound files that you want to use in your Phaser game, check the file extension to see what format the audio is saved in. If necessary, you may need to convert the audio to a different format (typically .wav or .mp3).

RECOMMENDED: Avoid using audio with large file sizes, as it will slow down your game. Most of your audio files should probably be less than 100 KB. Music files will typically be much larger (several MB).

Phaser coding references in this section:

• Load Audio

• Add Audio

• Set Audio to Loop

• Play Audio (and Stop)

• Pause Audio (and Resume)

• Change Volume of Audio

• Make Audio Fade

Phaser API Documentation:

• Properties and Methods for Sound Manager

• Properties and Methods for Sound

Load Audio

Each audio file (also referred to as an asset) must be loaded into the game's memory before you can add it to your game world.

game.load.audio('coin-sound', 'assets/sounds/coin.wav');

The command to load an asset is always placed in your preload() function.

• 'coin-sound' represents an asset key — a key is sort of like a variable name. You decide what string to use for the key, as long as each audio asset has a unique key.

• 'assets/sounds/coin.wav' represents the folder path and filename of the audio to load. Change this to match your specific folder path and filename.

Add Audio

Once an audio asset has been loaded into memory, you can add the audio to your game so it will be ready to play.

Declare a global variable for the sound, and add the sprite by assigning it to the variable. The command to add audio is placed in the create() function.

coinSound = game.add.audio('coin-sound', 0.3);

• 'coin-sound' represents the asset key of the audio to use. Replace this with your asset key.

• 0.3 represents the volume to use when playing this sound, which can be a value between 0 to 1 (with 1 being the file's maximum volume). Adjust this value to the volume you want.

Be aware that the sound won't actually play until you use a command telling it to start playing.

TIP: The volume to set for each sound depends on how loud the recording of the sound is — and on how loud you want it to be relative to the other sounds in the game. As you keep adding new sounds to your game, you may need to adjust their volumes relative to one another.

Set Audio to Loop

By default, when a sound is played, it will play once and then stop. However, you can set a sound to play over and over again in a continuous loop. You'll still be able to stop the sound if and when needed.

Looping can be useful for background music or for certain sound effects.

You would set a sound to loop by including a command in your create() function, after adding the audio to the game.

For example, to set a sound named spinSound to loop:

spinSound.loop = true;

Play Audio (and Stop)

Once audio has been added to the game, it is ready to play.

For example, to play a sound named spinSound:

spinSound.play();

Typically, commands to play sounds are placed in the update() function or in custom functions.

However, you can also play a sound by including a command in the create() function. This would be useful for background sounds (music, etc.) that you want playing at the start of the game.

Stop Audio

By default, when a sound is played, it will play once and then stop.

However, if you have a long audio track (such as background music, etc.) or you have set a sound to loop, you can stop the audio whenever you need to.

For example, to stop playing a sound named spinSound:

spinSound.stop();

If you have stopped a sound, then it will start from the beginning of the audio track when you play it again.

Pause Audio (and Resume)

You can also pause audio and then resume playing it.

For example, to pause a sound named gameMusic:

gameMusic.pause();

Then to resume playing the sound from its pause point:

gameMusic.resume();

Change Volume of Audio

If necessary, you can change the volume of a sound during gameplay.

For example, to change the volume of a sound named gameMusic:

gameMusic.volume = 0.2;

• 0.2 represents the volume which can be a value between 0 to 1 (with 1 being the file's maximum volume).

Make Audio Fade

You can play a sound and make it fade by changing its volume over a specific duration. This might be useful for background music or for certain sound effects.

Phaser has three methods that can be used for fading audio:

• fadeIn() — the sound starts playing from a volume of 0 and increases to a volume of 1 over a duration you specify

• fadeOut() — the sound starts playing from a volume of 1 and decreases to a volume of 0 over a duration you specify

• fadeTo() — the sound starts playing from its currently set volume and changes to a new volume you specify over a duration you specify

Fade In

For example, to play a sound named gameMusic and make it fade in (from volume of 0 to volume of 1):

gameMusic.fadeIn(2000);

• 2000 represents the duration in milliseconds for the fade (1000 ms = 1 second). Change this value to whatever duration you want.

Fade Out

For example, to play a sound named gameMusic and make it fade out (from volume of 1 to volume of 0):

gameMusic.fadeOut(2000);

• 2000 represents the duration in milliseconds for the fade (1000 ms = 1 second). Change this value to whatever duration you want.

Fade To

For example, to play a sound named gameMusic and make it fade from its currently set volume to a new volume:

gameMusic.fadeTo(2000, 0.2);

• 2000 represents the duration in milliseconds for the fade (1000 ms = 1 second). Change this value to whatever duration you want.

• 0.2 represents the new volume to fade to, which can be a value between 0 to 1 (with 1 being the file's maximum volume).