Fork me on GitHub

Audio

Creates an interactive audio player in HTML5 with fallback for old browsers.


Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Audio module.

YUI().use(
  'aui-audio',
  function(Y) {
    // code goes here
  }
);

Using Audio

Create an HTML element.

<div id="myAudio"></div>

Set boundingBox to the newly created element, set url to your chosen audio file, and render it!

YUI().use(
  'aui-audio',
  function(Y) {
    new Y.Audio(
      {
        boundingBox: '#myAudio',
        url: 'http://alloyui.com/audio/zelda.mp3'
      }
    ).render();
  }
);

Some browsers have some problems with HTML5 audio codecs and simply doesn't execute certain audio extensions. Firefox for example only executes OGG files, that's why we recommend to specify the oggUrl parameter too.

YUI().use(
  'aui-audio',
  function(Y) {
    new Y.Audio(
      {
        boundingBox: '#myAudio',
        url: 'http://alloyui.com/audio/zelda.mp3',
        oggUrl: 'http://alloyui.com/audio/zelda.ogg'
      }
    ).render();
  }
);
For more information about configuration, check out our API Docs.
For more information about configuration, check out our API Docs.