Sound - samme/phaser3-faq GitHub Wiki

Frequently misunderstood. 😢

Autoplay

Most browsers won't play sound until the user clicks/taps on the game. You can check the sound manager's locked property for this.

Chrome gives a console warning if the game boots using Web Audio:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

That's normal. Phaser will try to resume the audio context after the first user gesture (click/tap). If you don't need sound in your game, disable audio and you won't see this warning.

You can also create the game from a click/tap to avoid this problem.

Some browsers give a console error when playing a locked sound fails, and some don't.

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. Detuning and panning effects are in Web Audio only. Web Audio may have lower latency.

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 at least MP3.

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 or play 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 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). You don't use these sources directly; instead you play them through the sound manager.

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.

Multiple sound managers

It can be convenient to create a second sound manager.

new Phaser.Game({
  callbacks: {
    preBoot: function (game) {
      // Use `this.game.music` in a scene.
      game.music = Phaser.Sound.SoundManagerCreator.create(game);
    }
  }
});

Sounds

These are like audio tracks.

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

this.sound.play('kapow');

That's it. Repeat as necessary.

If you need to pause, stop, or monitor a specific sound, create a sound object:

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

kapowSound1.play();
// …
kapowSound1.pause();
// …
kapowSound1.resume();

If you call a sound's play() method again, it will restart. (Remember, these are like audio tracks.) If you want to play multiple sounds at once from the same source, add multiple sounds:

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

You should discard sounds when finished with them:

kapowSound1.destroy();
// etc.

Time values (e.g., delay, duration, seek) are in seconds, not milliseconds.

You can work on sounds in the manager even without a direct reference: get(), getKey(), stopByKey(), removeByKey().

Audio sprites and markers

Audio sprites combine several sounds into one source file. audiosprite makes these.

Load these with load.audioSprite() and then play them with sound.playAudioSprite() or sound.addAudioSprite().

You can also add markers to any sound created with sound.add().