HTML5 Audio Player with PlayList

HTML 5 audio is getting popular. If a page targets Apple devices, then HTML 5 is the way to continue.


Though I have seen many HTML 5 Audio tag samples, I couldn't find any good sample for creating a play list with Audio tag. This sample shows how to do that. Developers may write better coding than this, but this quick and simple sample was done to demonstrate the strategy.


First, define the player in HTML 5

<audio autoplay="false"
       controls="controls"
       id="html5AudioPlayer"
       src="temp-audio-file.mp3"
       stlye="width:400px;">
</audio>

* you should set a valid mp3 file for 'src' attribute of the audio tag. otherwise media play will not start.

Then define the javascript: javascript will play the next mp3 (in the playlist) at the end of each mp3. That will create the continoues playlist.

<script type="text/javascript">
//define the play list
var audioPlayList = new Array();
audioPlayList[0] = 'http://myserver.com/my-audio-01.mp3';
audioPlayList[1] = 'http://myserver.com/my-audio-02.mp3';
audioPlayList[2] = 'http://myserver.com/my-audio-03.mp3';

//find the audio section
var html5Audio = document.getElementById('html5AudioPlayer');

//attach event - on load
html5Audio.addEventListener('loadstart', function () {
  var currentMp3File = html5Audio.src;
  var firstMp3File = audioPlayList[0]; //play the first mp3
  //only interrupt if its the cold start
  if (currentMp3File.indexOf("temp-audio-file.mp3") >= 0) {
    html5Audio.src = firstMp3File;
    html5Audio.pause(); //auto start = false
  }
});

//attach event - on end - move to next one
html5Audio.addEventListener('ended', function () {
  var currentMp3File = html5Audio.src;
  for (var i = 0; i < audioPlayList.length; i++) {
    var audioFile = audioPlayList[i];
    if (currentMp3File.indexOf(audioFile) >= 0) {
      //next audio
      var nextAudioFile = audioPlayList[i + 1];
      if (nextAudioFile == undefined) {
        //start from first item again -loop
        nextAudioFile = audioPlayList[0]; 
      }
      html5Audio.src = nextAudioFile;
    }
  }
});

//attach event - play - to notify others
html5Audio.addEventListener('play', function () {
  var currentMp3File = html5Audio.src;
  //findthe index
  for (var i = 0; i < audioPlayList.length; i++) {
    var audioFile = audioPlayList[i];
    if (currentMp3File.indexOf(audioFile) >= 0) {
      audioplayertrackchanged(i);
    }
  }
});

//play a track by track index
function playtraack(index) {
  var nextAudioFile = audioPlayList[index];
  html5Audio.src = nextAudioFile;
}

//notify the current playing track number
function audioplayertrackchanged(newindex) {
  //do any page update etc here for each track
  //e.g. display a message etc
}
</script>

References:
I got this concept from http://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist.