javascript - 完成后 HTML5 音频标签更改 Src。查询

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 元素的链接时，警报返回 undefined。我只是不知道我做错了什么。

提前致谢。

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。