Provide both files and let the browser pick: use
At a glance
| Fact | Value | Source |
|---|---|---|
| WebM audio codec support | Vorbis and Opus | developer.mozilla.org |
| Single-format alternate choice | MP3 (broadest support) | developer.mozilla.org |
| Feature test method | canPlayType() | developer.mozilla.org |
Give the browser two files and let it choose. With the HTML <audio> element, list a WebM/Opus <source> first and an MP3 <source> second – the browser plays the first one it supports and ignores the rest:
<audio controls>
<source src="music.webm" type="audio/webm; codecs=opus">
<source src="music.mp3" type="audio/mpeg">
alternate text for unsupported browsers
</audio>If you load audio in JavaScript instead of markup, test first with audio.canPlayType('audio/webm; codecs=opus'), which returns probably, maybe or an empty string, then pick the URL to fetch (MDN cross-browser audio basics). MDN also notes that if you can only ship one format, MP3 covers the broadest range of devices and browsers, so keep an MP3 copy of every asset even if WebM/Opus is your primary format.
For Web Audio (used by most game engines and Phaser’s WebAudioSoundManager), fetch the file as an ArrayBuffer and call decodeAudioData(); catch a decode failure and retry with the MP3 URL, since decodeAudioData rejects on unsupported audio. Phaser’s loader already does this kind of capability check, falling back to an HTML5AudioFile when Web Audio isn’t available.
With Playgama MCP, an AI agent can upload the build and publish a sandbox link to test playback across browsers.
Test on real mobile Safari and older Android WebViews before shipping – codec support there is the part most likely to break silently.
Sources
- Media container formats (file types) – MDN
- Codecs in common media types – MDN
- Cross-browser audio basics – MDN
- Audio | Phaser Help
- Playgama MCP
Related questions
Why use WebM/Opus at all if MP3 works everywhere?
Opus in WebM is an open, patent-free codec and often compresses better at the same quality, which helps download size for larger music tracks.
Does canPlayType() guarantee playback works?
No – it only reports the browser’s claimed support level (probably, maybe, or empty). Always test actual playback on target devices before release.
Last updated: 30 September 2026