Fork me on GitHub

Audio


Play Pause Change Audio
<div id="myAudio"></div>
<br>
<a href="#" class="btn btn-success" id="play-btn">Play</a>
<a href="#" class="btn btn-danger" id="pause-btn">Pause</a>
<a href="#" class="btn btn-info" id="change-audio-btn">Change Audio</a>
YUI().use(
  'aui-audio',
  function(Y) {
    var audio = new Y.Audio(
      {
        boundingBox: '#myAudio',
        url: 'https://alloyui.com/audio/zelda.mp3',
        oggUrl: 'https://alloyui.com/audio/zelda.ogg'
      }
    ).render();

    Y.one('#play-btn').on(
      'click',
      function(e) {
        e.preventDefault();

        audio.play();
      }
    );

    Y.one('#pause-btn').on(
      'click',
      function(e) {
        e.preventDefault();

        audio.pause();
      }
    );

    Y.one('#change-audio-btn').on(
      'click',
      function(e) {
        e.preventDefault();

        audio.pause();
        audio.set('url', 'https://alloyui.com/audio/bc.mp3');
        audio.set('oggUrl', 'https://alloyui.com/audio/bc.ogg');
        audio.load();
        audio.play();
      }
    );
  }
);