title: Add Next and Previous button to HTML5 audio player from JSON using javascript and jquery
body: <p>I'm building a music player that needs a next and previous button. My playlist is returned from my database as a JSON object. The problem I'm encountering is getting the next and previous buttons to work. I have created a <a href="http://jsfiddle.net/jsledervenson/YTKWL/6/" rel="nofollow">jsFiddle with the code</a>. Does anybody know how to make the next and previous buttons work?</p>
  
  <p>UPDATE:</p>
  
  <p>This question pertains more on how to get the next previous value in the JSON array. I really just need to display the name of the next and previous song in the JSON array.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;a id="prev-bt" href="#"&gt;
  &lt;div class="player-musicnav-rw-column1"&gt;
      &lt;ul class="musicnav-rw"&gt;
          &lt;li class="rw"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;&lt;/a&gt;
  
  &lt;audio id="audio-player" name="audio-player" src="" &gt;&lt;/audio&gt;
  
  
  &lt;a id="next-bt" href="#"&gt;
  &lt;div class="player-musicnav-ff-column3"&gt;
      &lt;ul class="musicnav-ff"&gt;
          &lt;li class="ff"&gt;NEXT&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a id="prev-bt" href="#"&gt;
  &lt;div class="player-musicnav-ff-column3"&gt;
      &lt;ul class="musicnav-ff"&gt;
          &lt;li class="ff"&gt;PREV&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;div id="player-digital-title"&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;a href="#" id='player-handwriting-title'&gt;&lt;/a&gt;​
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>var whichsong = 0;
  $(document).ready(function() {
      $("#play-bt").click(function() {
          $("#audio-player")[0].play();
      })
  
      $("#pause-bt").click(function() {
          $("#audio-player")[0].pause();
          $("#message").text("Music paused");
      })
  
      $("#stop-bt").click(function() {
          $("#audio-player")[0].pause();
          $("#audio-player")[0].currentTime = 0;
      })
  
      $('#player-handwriting-title').click(function() {
          $('#player-digital-title').html($(this).html());
      });
      $("#next-bt").click(function() {
          $("#audio-player")[0].pause();
          $("#audio-player")[0].src = '';
          whichsong++;
          if (whichsong == treeObj.root.length) {
              whichsong = 0;
          }
          $("#audio-player")[0].src = treeObj.root[whichsong];
          if (playing) {
              $("#audio-player")[0].play();
          }
      })
      $("#prev-bt").click(function() {
          $("#audio-player")[0].pause();
          $("#audio-player")[0].src = '';
          whichsong++;
          if (whichsong == treeObj.root.length) {
              whichsong = 0;
          }
          $("#audio-player")[0].src = treeObj.root[whichsong];
          if (playing) {
              $("#audio-player")[0].play();
          }
      })
  });
  
  $(document).ready(function() {
  
      var treeObj = {
          "root": [{
              "id": "1",
              "trackName": "Whippin Post"},
          {
              "id": "2",
              "trackName": "Sweet Caroline"},
          {
              "id": "3",
              "trackName": "Tears in Heaven"},
          {
              "id": "4",
              "trackName": "Ain't She Sweet"},
          {
              "id": "5",
              "trackName": "Octopus' Garden"},
          {
              "id": "6",
              "trackName": "Teen Spirit"},
          {
              "id": "7",
              "trackName": "Knockin on Heaven's Door"}]
      };
  
      var $ul = $("&lt;ul&gt;&lt;/ul &gt; ");
      $.each(treeObj.root, function(i, v) {
          $ul.append(
          $(" &lt; li &gt; &lt; /li&gt;").append($("&lt;a&gt;&lt;/a &gt; ").attr({
              "
  href ": v.id,
              "
  data - file ": v.trackFile
          }).html(v.trackName)));
      });
      $("#player - handwriting - title ").empty().append($ul);
  
  
      $("#player - handwriting - title a ").click(function() {
          var name = $(this).html(),
              filename = $(this).attr("
  data - file ");
          filename2 = "
  upload - form / upload / " + filename;
          $('#player-digital-title').html($(this).html());
  
          document.getElementById('audio-player').src = filename2;
          $("#audio - player ")[0].play();
          return false;
      });
  });​
  </code></pre>
  
  <p>I think I'm very close but I just can't quite seem to get it to work.</p>