HTML5 Audio Compatibility Layer
There are many great audio playback libraries out there, each trying to solve a different problem. Audio5js tries to address or avoid the following:
audio5.js (or the minified version
audio5.min.js) and the SWF fallback, found in
Simply download the source code, extract, and place both files somewhere in your project. For the purpose of demonstration, let's assume your project directory structure looks like this:
/-/public--/js--- audio5.js--/swf--- audio5js.swf
The Audio5js object accepts a configuration object with the following settings:
Here's an example configuration using all the settings options above:
Audio5js exposes the following API:
Audio5js.can_play class method supports the following mime-type queries:
audio/mpeg; codecs="mp3". Example -
audio/ogg; codecs="vorbis". Example -
audio/ogg; codecs="opus". Example -
audio/webm; codecs="vorbis". Example -
audio/mp4; codecs="mp4a.40.5". Example -
audio/wav; codecs="1". Example -
Play / PauseMove to Start
Like HTML5's Audio, Audio5js exposes events that can be used to capture the state and properties of the audio playback cycle:
canplayevent. Note that Firefox will trigger this event after seeking as well - If you're listening to this event, we recommend you use the
one('canplay',callback)event listener binding, instead of the
To subscribe to an event triggered by Audio5js, you can use the
on method. Similarly, to unsubscribe from an event, you can use the
on method accepts the following arguments:
thisinside the callback)
off method accepts the following arguments:
var audio5js =ready: audioReady;var//this points to the Audio5js instancethison'play' console.log'play'; this;thison'pause' console.log'pause'; this;thison'ended' console.log'ended'; this;// timeupdate event passes audio duration and position to callbackthison'timeupdate'console.logposition duration;this;// progress event passes load_percent to callbackthison'progress'console.logload_percent;this;//error event passes error object to callbackthison'error'console.logerrormessage;this;
Browser-based audio isn't perfect, and it's more than likely that you'll need to serve the same audio in two formats, to support
a wider crowd. If you intend to play different audio sources, based on browser codec support, pass a list of desired codecs to the
codecs array of the settings object. Note that passed codecs should be listed in order or precedence and
that 'mp3' is always the fallback codec in case no other codec is supported by the browser.
Here's an example of initializing Audio5js with multiple audio sources, based on browser support:
var audio5js =swf_path: '/swf/audio5js.swf'codecs: 'mp4' 'vorbis' 'mp3'var audio_url;switch playercodeccase 'mp4':audio_url = '/audio/song.mp4';break;case 'vorbis':audio_url = '/audio/song.ogg';break;default:audio_url = '/audio/song.mp3';break;thisloadaudio_url;thisplay;;
Safari mobile won't let you play audio without explicit user interaction. In other words, the initial click on your "play" button needs to load the audio. Here's an example of how to load and play audio on Safari Mobile with Audio5js:
Play / Pause
Audio5js comes baked with AMD / RequireJS support. Assuming your public directory structure is as above, here's an example of how to use Audio5js with RequireJS:
Your HTML should look something like this:
js/player.js you can now require Audio5js like so:
require"js/audio5"var audio5 =thisload'/somesong.mp3';thisplay;;;
Audio5js can also be used with Ender.js. Here's how you can add it to your project:
# add audio5 as dependency$ ender build audio5
//use as a global packagevar Audio5js = require'audio5';var player =swf_path: 'node_modules/audio5/swf/audio5js.swf';// or via the Ender $ objectvar play = new $audio5swf_path: 'node_modules/audio5/swf/audio5js.swf';
Audio5js is available as an Angular.js service.
Audio5js is available as a Bower package.
$ bower install audio5js
Audio5js doesn't try to please everyone. Having said that, it has been successfully tested on:
Please feel free to fork, fix and send me pull requests. Alternatively, open tickets for bugs and feature requests.
Audio5js relies heavily on the wonderful audiojs library. The AS3 code for the fallback MP3 player is taken almost as-is from audiojs, with some minor modifications for more comprehensive event handling.
Audio5js is released under the MIT License.
Copyright (c) 2013 Zohar Arad firstname.lastname@example.org
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
No fluffy penguins were harmed during the making of Audio5js.