Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Javascript AudioFX (v0.4.0)

Simple HTML5 <audio> support.

  • Easily play() and stop() any audio track.
  • Add support for audio pools for short, repeating, overlapping sounds.
  • Add support for loop in browsers that don't natively support it.
  • Load appropriate audio format based on current browser support (ogg|mp3|m4a|wav)
  • Callback when audio has loaded and canplay

You can find an article about how the library works here


You can download audio-fx.js, or get the minified version here


git clone
  • All code is in audio-fx.js
  • Minified version available in audio-fx.min.js
  • Less than 1.2K (minified)
  • No 3rd party library is required
  • Demo can be found in /index.html


Include audio-fx.js in your application.

In its simplest form, load music by constructing an AudioFX object:

var music = AudioFX('sounds/music.mp3');

The AudioFX instance has the simplest possible API:;     // play the audio
music.stop();     // stop the audio;      // the underlying <audio> tag

However, different browsers support different formats so you should provide at least ogg and mp3 formats if you want to support a broad range of browsers:

var music = AudioFX('sounds/music', { formats: ['ogg', 'mp3'] });

Other options include volume, loop and autoplay:

var music = AudioFX('sounds/music', {
                      formats: ['ogg', 'mp3', 'm4a', 'wav'],
                      volume:   0.5,
                      loop:     true,
                      autoplay: true });

Audio Pools

If you want to play a short sound effect multiple overlapping times (e.g. game explosions and effects) then you need multiple <audio> tags.

The AudioFX library provides this functionality by accepting a pool option:

var shoot = AudioFX('sounds/shoot', { formats: ['ogg', 'mp3'], pool: 10 });

The AudioFX instance has the exact same API as above:;     // play the first available audio
music.stop();     // stop the audio;      // an ARRAY containing the pool of underlying <audio> tag

Waiting for Sounds to Load

The AudioFX method accepts an optional 3rd parameter that can contain a function that will be called when the <audio> tag has loaded:

var name    = 'sounds/music';
var options = { formats: ['ogg', 'mp3'] };
var onload  = function() { alert('music is ready'); }

var music = AudioFX(name, options, onload);


If necessary, you can examine the AudioFX.supported property to find out what kind of <audio> support is provided by your browser.

It will be false if there is no support at all, otherwise it will contain:

AudioFx.supported.ogg;  // (true|false)
AudioFx.supported.mp3;  // (true|false)
AudioFx.supported.m4a;  // (true|false)
AudioFx.supported.wav;  // (true|false)
AudioFx.supported.loop; // (true|false) - some browsers dont (yet) support the loop option


After starting this project, I discovered the buzz library which also abstracts HTML5 audio functionality... and does it much more thoroughly than audio-fx but does not have support for creating an audio pool.

... I should probably just be forking buzz and trying to add pooling support to it, but I haven't had the time yet. If you have any thoughts let me know !

Also note that browser support for HTML5 audio is still pretty messed up. This library works pretty well in most modern desktop browsers, IE9, Chrome13, FF5, Opera11, but Safari continues to have delays that make short sounds unusable. Also mobile browsers are very limited in their support for HTML5 Audio.

You can find an example rant here.

So... Very Early experimentation. YMMV


MIT license.

Sample Sounds

NOTE: the sample sounds included in this project are royalty free sounds licensed from Lucky Lion Studios and Premium Beat. They are licensed ONLY for use in this project. If you fork this code you must provide your own sample sounds.

Thanks for your honesty!


If you have any ideas, feedback, requests or bug reports, you can reach me at, or via my website: Code inComplete


A Simple HTML5 Audio Helper Library







No releases published


No packages published