Audio

• Introduction
• Basic Example
• Real World Example

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="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://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: 'https://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: 'https://alloyui.com/audio/zelda.mp3',
        oggUrl: 'https://alloyui.com/audio/zelda.ogg'
      }
    ).render();
  }
);