Sound

Frequently misunderstood. 😢

Sound modes

Phaser 3 uses Web Audio, the audio element (“HTML5 Audio”), or no audio, depending on the device support (which you can find in game.device.audio). Most devices support Web Audio.

You can disable Web Audio with

new Phaser.Game({ audio: { disableWebAudio: true } });

or disable all audio with

new Phaser.Game({ audio: { noAudio: true } });

Sound sources

See details in Media container formats and Web audio codec guide. If you're publishing a game you should probably support more than one audio format.

When loading audio, Phaser matches the media type (inferred from the URL or given by you) with the device's support for that type. If there's no match, nothing is downloaded and if you try to create a sound with that key it will fail with an error.

You can give an explicit media type like

this.load.audio('scream', { url: 'scream.mpg', type: 'm4a' });

The type keywords are in https://newdocs.phaser.io/docs/3.55.2/focus/Phaser.Device.Audio.

If you want to play simultaneous sounds from the same source in HTML5 Audio mode, give instances:

this.load.audio('laser', 'laser.mpg', { instances: 4 });

In Web Audio mode, the audio cache (game.cache.audio) stores AudioBuffer. In HTML5 Audio mode, it stores arrays of audio element (one per instance).

Sound manager

There is one global sound manager, available on game.sound or this.sound on a scene. You can think of it as an audio player.

Sounds

These are like audio tracks.

If you need to play a sound through once, use play():

this.sound.play('kapow');

That's it. Repeat as necessary.

If you need to pause, stop, or monitor a sound, use add():

const kapowSound1 = this.sound.add('kapow');

kapowSound1.play();
// …

For simultaneous plays from the same source, add multiple sounds (remember these are like tracks):

const kapowSound2 = this.sound.add('kapow');

You should discard those when finished with them:

kapowSound1.destroy();

• Sound inspector demo

Audio sprites and markers

If you did load.audioSprite() then the sound has markers already. But you can also add markers to any sound.

• Sound markers inspector demo

Multiple sound managers

It can be convenient to create a second manager.

new Phaser.Game({
  callbacks: {
    preBoot: function (game) {
      game.music = Phaser.Sound.SoundManagerCreator.create(game);
    }
  }
});

this.game.music.play('waltz');