Phaser Audio — Sound Effects and Background Music
In this tutorial, you will learn about Phaser Audio. We cover key concepts, practical examples, and best practices to help you master this topic.
Phaser audio system loads and plays sound effects and music with volume, pan, and rate control across Web Audio and HTML5 Audio backends.
What You'll Learn
By the end of this guide, you will load and play sound effects, control volume and playback rate, use audio sprites for efficient loading, implement sound pooling for frequent effects, handle autoplay policies, and manage background music.
Basic Sound
// Load in preload
this.load.audio('explosion', 'explosion.mp3');
this.load.audio('bgm', 'music.ogg');
// Play in create
this.sound.play('explosion');
var music = this.sound.add('bgm', { loop: true, volume: 0.5 });
music.play();
Volume and Pan
var sfx = this.sound.add('shoot');
sfx.setVolume(0.3);
sfx.setRate(1.2); // Pitch shift
sfx.setPan(-0.5); // Left speaker
sfx.play();
Sound Pooling
// For rapid-fire sounds, create a pool
this.shootSounds = [];
for (var i = 0; i < 5; i++) {
this.shootSounds.push(this.sound.add('shoot'));
}
function playShoot() {
var available = this.shootSounds.find(function(s) { return !s.isPlaying; });
if (available) available.play();
}
Audio Sprites
this.load.audioSprite('sfx', 'sfx.json', [
'sfx.ogg', 'sfx.mp3'
]);
// Play specific sprite
this.sound.playAudioSprite('sfx', 'player_jump');
Common Mistakes
1. Missing Audio Formats
Browsers support different formats. Provide both .mp3 and .ogg for cross-browser support.
2. Browser Autoplay Block
Audio cannot play until user interaction. Play first sound on a click/tap event.
3. Not Checking isPlaying
Playing the same sound repeatedly creates overlapping instances. Check isPlaying for pooling.
4. Audio Decode Delay
Large audio files take time to decode. Preload and add a small delay before playing.
5. Not Handling Audio Context
Web Audio context may be suspended. Resume on user interaction.
Practice Questions
Q1: How do you load audio? A: Use this.load.audio(key, url) in preload.
Q2: How do you make music loop? A: Set loop: true in the sound config.
Q3: How do you change volume? A: Call sound.setVolume(0.5).
Q4: How do you stop all sounds? A: Call this.sound.stopAll().
Q5: How do you create an audio sprite? A: Use this.load.audioSprite(key, jsonUrl, audioUrls).
Challenge: Build a rhythm game where notes fall from the top. When the player presses the correct key in time, a sound plays. Show a visual indicator for each note hit.
FAQ
Try It Yourself
Play sounds on interaction.
<!DOCTYPE html>
<html>
<head>
<title>Phaser Audio</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Audio Demo</h2>
<canvas id="game"></canvas>
<script>
var config = {
type: Phaser.AUTO,
width: 400,
height: 300,
backgroundColor: '#1a1a2e',
scene: {
create: function() {
var scene = this;
// Generate audio context and create beep buffer
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function createBeep(freq, duration) {
var sr = audioCtx.sampleRate;
var len = sr * duration;
var buffer = audioCtx.createBuffer(1, len, sr);
var data = buffer.getChannelData(0);
for (var i = 0; i < len; i++) {
data[i] = Math.sin(2 * Math.PI * freq * i / sr) * 0.3;
}
return buffer;
}
// Create sound from buffer
var beepBuffer = createBeep(440, 0.2);
var beep2Buffer = createBeep(880, 0.15);
this.game.sound.context = audioCtx;
// Create Phaser sounds
try {
var beep1 = scene.sound.add('beep1');
var beep2 = scene.sound.add('beep2');
// Add decoded audio (simplified for demo - in real use, preload files)
this.add.circle(200, 150, 60, 0x4ecdc4)
.setInteractive()
.on('pointerdown', function() {
if (audioCtx.state === 'suspended') audioCtx.resume();
// Use a Web Audio approach
var source = audioCtx.createBufferSource();
source.buffer = beepBuffer;
source.connect(audioCtx.destination);
source.start();
});
this.add.circle(200, 150, 40, 0xff6b35)
.setInteractive()
.on('pointerdown', function() {
if (audioCtx.state === 'suspended') audioCtx.resume();
var source = audioCtx.createBufferSource();
source.buffer = beep2Buffer;
source.connect(audioCtx.destination);
source.start();
});
this.add.text(200, 250, 'Click circles to play sound', {
fill: '#cccccc', fontSize: '14px'
}).setOrigin(0.5);
} catch(e) {
console.log('Audio context not available');
}
}
}
};
var game = new Phaser.Game(config);
</script>
</body>
</html>
What's Next
Implement arcade physics.
Arcade Physics — Arcade physics. Matter Physics — Matter.js physics.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro