skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

audio-and-sound

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

Updated May 7, 2021
Search Tags:#game development#sound#audio#music#phaser#spatial audio#web audio api
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill audio-and-sound-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audio-and-sound
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/audio-and-sound
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill audio-and-sound-travispwingo

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. This Skill provides the patterns and API reference needed to implement game audio correctly without digging through Phaser source code. ## Core Features & Use Cases - Sound Playback Patterns: Covers fire-and-forget playback via this.sound.play() and retained sound instances via this.sound.add() for ongoing control of volume, rate, detune, seek, loop, 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 WebAudio: Documents PannerNode-based positional audio, listener positioning, runtime audio decoding, and AnalyserNode-based visualization for WebAudio backends. - Use Case: A developer building a platformer needs looping background music, coin pickup sound effects with format fallbacks, and positional enemy roars. This Skill provides the exact loading, playback, and spatial configuration code for each. ## Quick Start Ask the AI to add looping background music and a coin pickup sound effect to your Phaser scene using this skill.

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 a sound in Phaser?▼

Load the audio in preload() with this.load.audio(), then call this.sound.play('key') in create() for fire-and-forget playback. For ongoing control, use this.sound.add('key') to get a sound instance you can pause, stop, or adjust later.

How do I loop background music in Phaser?▼

Create the sound with a loop config: this.sound.add('music', { loop: true, volume: 0.5 }), then call play() on it. Looping sounds persist across scene changes, so stop them manually on scene shutdown if needed.

Does Phaser support spatial audio?▼

Phaser supports spatial audio only with the WebAudio backend, using a PannerNode positioned via the source config in SoundConfig. Set the listener with this.sound.setListenerPosition(x, y). The source config is silently ignored under HTML5 Audio.

Why is my Phaser audio not playing on mobile browsers?▼

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 listen for the 'unlocked' event before playing sounds at startup.

What audio formats should I use for Phaser games?▼

No single format works in every browser, so pass an array of URLs like ['assets/bgm.ogg', 'assets/bgm.mp3'] to this.load.audio(). MP3 has the broadest support, while OGG Vorbis fails on Safari and AAC/M4A works well on iOS.

How do I play multiple simultaneous sounds with HTML5 Audio in Phaser?▼

HTML5 Audio uses a pool of audio tags, so specify instances at load time: this.load.audio('shot', 'assets/shot.mp3', { instances: 4 }). The default is one instance, and WebAudio has no such limitation.

Related Skills

Explore More Software Engineering Skills→
ArtRivArtRiv

loading-assets

Load Phaser 4 game assets via the Loader with progress events.

Community
Intermediate
fiandofiando
1

dev-phaser-physics-matter

Implements Matter.js physics bodies, constraints, and collision events in Phaser 3 games.

Community
Intermediate
fiandofiando
1

dev-phaser-fundamentals

Configures Phaser 3 games with scenes, physics, and lifecycle management patterns.

Community
Intermediate
neighbor-game-aineighbor-game-ai

game-audio

Integrate game audio with Howler.js for effects, music, and 3D sound.

Official
Advanced