audio.js

Javascript Audio Player <audio.js>


audio.js


00:00/04:07

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.

Installation

  1. Put audio.jsplayer-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 2 Custom markup/css
Example 4 Customised player

Browser & format support

With Flash as a fallback, it should work pretty much anywhere.
It has been verified to work across:
  • Mobile Safari (iOS 3+)
  • Android (2.2+, w/Flash)
  • Safari (4+)
  • Chrome (7+)
  • Firefox (3+, w/ Flash)
  • Opera (10+, w/ Flash)
  • IE (6, 7, 8, w/ Flash)
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 theExternalInterface.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 yourflash player security settings for local filesExternalInterface 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.

License

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

Documentation Translations



留言

這個網誌中的熱門文章

How to PHP export to Excel 2

html viewport meta