完成后 HTML5 音频标签更改 Src。 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：

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

当歌曲结束时，警报返回未定义，它应该在下一个 li 元素上返回链接。我就是想不通我做错了什么。

提前致谢。

Answer 1

现在，$('#songSelector').next() 将转到 dom 中 #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。