MP3 is a frame-based format: encoders add silent padding samples at the start and often extra samples at the end, so the decoded audio is not exactly the original length. Looping it with the
At a glance
| Fact | Value | Source |
|---|---|---|
| MP3 encoding adds silent padding samples | start/end gap | developer.mozilla.org |
| AudioBufferSourceNode loop plays exact buffer length | no gap | developer.mozilla.org |
| loopStart sets restart point in seconds | trims padding | developer.mozilla.org |
MP3 is a stream of MPEG-1 Audio Layer III frames, and most encoders insert a small amount of silence at the very start of the stream plus extra padding samples at the end so the frame count comes out even. That padding is not part of your original waveform, so when a browser plays the file back-to-back with the HTML <audio loop> attribute, you hear a tiny click or gap at the seam every cycle. This is a property of the MP3 container itself, not a bug in a particular browser – MP3 is supported by all major browsers, but exact-length looping was never part of the format’s design.
If your game is scaffolded by an AI agent, Playgama MCP lets that agent upload builds and covers and publish a sandbox playtest link from the developer cabinet, though it does not write or fix audio code itself.
The reliable fix is to decode the file with the Web Audio API instead of relying on the media element. Load the file with fetch() and decodeAudioData(), put it in an AudioBufferSourceNode, and set loop = true; if the source file still has leading/trailing silence, use loopStart and loopEnd (in seconds) to mark the exact clean boundaries inside the buffer. Because AudioBufferSourceNode loops the decoded PCM buffer itself, not the compressed stream, it plays exactly the range you specify with no re-encoding artifacts at the seam.
Two practical notes: browsers block audio playback until a user gesture, so start the loop on click/tap, not on load. And if you build with Phaser, its WebAudioSoundManager routes sound through the Web Audio API, so looped music in a Phaser game benefits from this automatically.
For distribution, MP3 remains widely compatible across browsers and devices if you need broad audio support.
Sources
- Web audio codec guide – MDN
- AudioBufferSourceNode: loop property – MDN
- AudioBufferSourceNode: loopStart property – MDN
- WebAudioSoundManager | Phaser Help
- Audio for Web games – MDN
Related questions
Does switching to ogg vorbis fix MP3 looping problems?
Ogg Vorbis does not add the same fixed encoder padding as MP3, so a plain looped
Can I trim MP3 padding before shipping the file?
Yes, some encoders and tools can strip or report the padding, but the safest approach in-browser is still to decode to an AudioBuffer and set loopStart/loopEnd to the exact clean sample range.
Why does my loop work in one browser but click in another?
Different decoders may pad MP3 frames slightly differently, so the audible gap size varies by browser; decoding to a Web Audio buffer removes the dependency on each browser’s MP3 decoder.
Last updated: 30 September 2026