title: HTML5 Audio Playlist
body: <p>I'm trying to build an HTML5 audio player, my main problem is scrolling through tracks.  I have built a JSON file containing my tracks with titles and other information.  Here is the html code.</p>
  
  <pre><code>&lt;audio&gt;
     &lt;source src="" id="oggSource" type="audio/ogg" /&gt;
     &lt;source src="" id="mp3Source" type="audio/mpeg" /&gt;
     Your browser does not support the audio element.
  &lt;/audio&gt;
  &lt;br/&gt;
  
  &lt;input type="button" value="&lt;&lt;" onclick=""&gt;
  &lt;input type="button" value="Play" onclick="playPause()"&gt;
  &lt;input type="button" value="&gt;&gt;" onclick="playNextSongOnClick()"&gt;&lt;br/&gt;
  &lt;input type="button" value="Duration" onclick="duration()"&gt;&lt;input type="button" value="currentTime" onclick="currentTime()"&gt;&lt;br/&gt;
  </code></pre>
  
  <p>here is my javascript</p>
  
  <pre><code>function initiate_AudioPlayer(){
    var song = 0;
    $("#oggSource").attr("src","audio/"+playlist.songs[song].source+".ogg");
    $("#mp3Source").attr("src","audio/"+playlist.songs[song].source+".mp3");  
  }
  
  function playPause() {
    var audio = document.getElementsByTagName('audio')[0];
    if (audio.paused){audio.play();}
    else {audio.pause();}
  }
  
  function playNextSongOnClick(){
    var audio = document.getElementsByTagName('audio')[0];
    $("#oggSource").attr("src", "audio/song2.ogg");
    $("#mp3Source").attr("src", "audio/song2.mp3");
  
    audio.pause();
    audio.load();
    audio.play();
  }
  
  function duration(){
    var audio = document.getElementsByTagName('audio')[0];
    alert (audio.duration);
  }
  
  function currentTime(){
    var audio = document.getElementsByTagName('audio')[0];
    alert (audio.currentTime);
  }
  
  $('document').ready(initiate_AudioPlayer);
  </code></pre>
  
  <p>In Safari audio plays when I press play, but won't play another track after.
  When I click on the "duration" button, "NaN" pops up, so I assume that Safari is not loading the file.</p>
  
  <p>In Firefox I get the opposite problem.  The first track returns a duration of "NaN" but when I click on the "play next track" button, an actual duration value is returned and the track plays.</p>
  
  <p>In Chrome everything works awesome!  I haven't tested in IE9.</p>
  
  <p>Should I be buffering or unloading files or something like that?  Any help would be greatly appreciated.</p>