audio-and-sound

Implements audio playback, spatial sound, and volume control in Phaser 4 games.

Updated Jun 10, 2026
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill audio-and-sound-mudman1986
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: audio-and-sound
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/audio-and-sound
Command: npx skills add https://github.com/mudman1986/quarterless --skill audio-and-sound-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding sound to a Phaser game involves navigating WebAudio versus HTML5 Audio backends, browser autoplay policies, looping music, audio sprites, and spatial positioning, all of which have subtle pitfalls that cause silent or broken audio. ## Core Features & Use Cases - Sound Playback Patterns: Covers fire-and-forget playback with this.sound.play, persistent sound instances via this.sound.add, and per-sound or global control of volume, rate, detune, mute, loop, seek, and pan. - Audio Sprites and Markers: Explains loading audio sprites with JSON spritemaps and adding manual markers to split long tracks into named segments. - Spatial Audio and Events: Documents WebAudio-only spatial audio with PannerNode, listener positioning, follow tracking, plus the full sound and manager event tables. - Use Case: When building a Phaser platformer, use this Skill to add looping background music, positional enemy sound effects that follow sprites, and coin pickup audio sprites that survive browser autoplay restrictions. ## Quick Start Add background music and sound effects to my Phaser scene using this skill, including a looping theme and a coin pickup sound.

Frequently Asked Questions about audio-and-sound

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I play sound effects and music in Phaser?

Load audio in preload with this.load.audio, then call this.sound.play('key') for fire-and-forget effects or this.sound.add('key', { loop: true }) followed by play() for music you need to control later. Provide an array of formats like OGG and MP3 for cross-browser support.

How to loop background music in a Phaser scene?

Create the sound with this.sound.add('bgm', { loop: true, volume: 0.4 }) and call play(). The SoundManager is shared across scenes, so stop looping sounds manually on scene shutdown or they keep playing.

Why is my Phaser audio not playing in the browser?

Browsers block audio until user interaction, so the AudioContext starts suspended. Phaser unlocks it automatically on the first touch or click; check this.sound.locked and wait for the 'unlocked' event before playing sounds at startup.

Does Phaser support spatial or positional audio?

Yes, but only with the WebAudio backend. Pass a source config with x, y, refDistance, and optional follow target when adding a sound, and set the listener with this.sound.setListenerPosition. The source config is silently ignored under HTML5 Audio.

What is the difference between WebAudio and HTML5 Audio in Phaser?

Phaser prefers WebAudio, which supports precise timing, gapless looping, stereo panning, spatial audio, and runtime decoding. HTML5 Audio is the fallback with no spatial audio, no audible pan effect, and a limited pool of audio tags requiring an instances count for simultaneous playback.

How do I use audio sprites in Phaser?

Load the sprite with this.load.audioSprite('sfx', 'assets/sfx.json', ['assets/sfx.ogg', 'assets/sfx.mp3']), then play segments with this.sound.playAudioSprite('sfx', 'explosion'). The JSON spritemap entries become markers with name, start, and duration.