HTML5音頻標籤完成後更改源。 jQuery

Question

我已經創建了一個帶有ul的音頻元素。 ul是鏈接到不同歌曲的列表項目。當單擊該項目時，我已經獲得了該歌曲的改變，並且它可以工作，但是我希望當前播放的歌曲結束時該歌曲也會改變。下面是我的html和js。

HTML：

<div id="mp3_player"> 
    <div id="audio_box"> 
     <audio id="audioPlayer" preload="auto" src="" controls="controls"></audio> 
    </div> 
</div> 

<ul id="songSelector"> 
    <a href="song1.mp3"><li>song1</li></a> 
    <a href="song2.mp3"><li>song2</li></a> 
    <a href="song3.mp3"><li>song3</li></a> 
    <a href="song4.mp3"><li>song4</li></a> 
</ul> 

源不具有值具有因它是在我的腳本的另一部分加入。

JS：當歌曲結束時，它應該返回下一個li元素鏈接

$(audio).bind('ended', function() { 
    var testing = $('#songSelector').next().attr('href'); 
    alert(testing); 
}) 

警報返回undefined。我只是無法弄清楚我做錯了什麼。

謝謝先進。

Answer 1

現在，$('#songSelector').next()將在#songSelector之後的任何內容中。您可能需要跟蹤另一個變量中的哪個「當前」。

var currentSong = $('#songSelector').find('a:first'); 
$(audio).bind('ended', function() { 
    var next = currentSong.next(); 
    if (next.length) { 
     currentSong = next; 
    } else { 
     /* uncomment this if you want it to loop back to the beginning */ 
     // currentSong = $('#songSelector').find('a:first'); 
    } 
    var testing = currentSong.attr('href'); 
    alert(testing); 
}); 

然後你只需要在你的click處理程序來更新currentSong爲好。