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);
})

当歌曲结束时，警报会返回undefined，因为它应该返回下一个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);
});

然后您只需更新currentSong处理程序中的click。

HTML5音频标签完成后更改Src。 jQuery的

1 个答案: