audio.js

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere.

It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

Download audio.js

Installation

  1. Put audio.js, player-graphics.gif & audiojs.swf in the same folder.

  2. Include the audio.js file:

    <script src="/audiojs/audio.min.js"></script>
  3. Initialise audio.js:

    <script>
      audiojs.events.ready(function() {
        var as = audiojs.createAll();
      });
    </script>
  4. Then you can use <audio> wherever you like in your HTML:

    <audio src="/mp3/juicy.mp3" preload="auto" />

Examples

A series of API tests & examples for using and extending audio.js

Example 1 Test multiple load types

Example 2 Custom markup/css

Example 3 Multiple players, testing preload, loop & autoplay attributes

Example 4 Customised player

Example 5 Customised playlist player

Browser & format support

With Flash as a fallback, it should work pretty much anywhere.
It has been verified to work across:

ogg

audio.js focuses on playing mp3s. It doesn’t currently support the ogg format. As mp3 is the current defacto music transfer format, ogg support is lower on our list of priorities.

Flash local security

Note: For local content running in a browser, calls to the ExternalInterface.addCallback() method work only if the SWF file and the containing web page are in the local-trusted security sandbox.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html#addCallback()

This means that unless you have gone through the rigmarole of setting up your flash player security settings for local files, ExternalInterface calls will only work when the page is loaded from a ‘domain’. http://localhost counts, but any file:// requests don’t.

Source code

All efforts have been made to keep the source as clean and readable as possible. Until we release more detailed documentation, the annotated source is the best reference for usage.

Annotated source / Source on Github

License

audio.js is released under an MIT License, so do with it what you will.