title: HTML5 Audio Tag Changing Src when finished. jQuery
body: <p>I have created a audio element with a ul. In the ul is list items which are linked to different songs. I have gotten the song to change when the item is clicked and it all works however i would like the song to also change when the current playing song finishes. Below is my html and js.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="mp3_player"&gt;
      &lt;div id="audio_box"&gt;
          &lt;audio id="audioPlayer" preload="auto" src="" controls="controls"&gt;&lt;/audio&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul id="songSelector"&gt;
      &lt;a href="song1.mp3"&gt;&lt;li&gt;song1&lt;/li&gt;&lt;/a&gt;
      &lt;a href="song2.mp3"&gt;&lt;li&gt;song2&lt;/li&gt;&lt;/a&gt;
      &lt;a href="song3.mp3"&gt;&lt;li&gt;song3&lt;/li&gt;&lt;/a&gt;
      &lt;a href="song4.mp3"&gt;&lt;li&gt;song4&lt;/li&gt;&lt;/a&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The source doesn't have a value becasuse it is added in another part of my script.</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(audio).bind('ended', function() {
      var testing = $('#songSelector').next().attr('href');
      alert(testing);
  })
  </code></pre>
  
  <p>The alert returns undefined when the song finished when it should return the link on the next li element. I just cant figure out what i am doing wrong.</p>
  
  <p>Thanks in advanced.</p>