Javascript HTML5音频标签在完成时更改Src。jQuery

我用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>

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

当歌曲结束时，警报返回undefined（未定义），此时它应返回下一个li元素上的链接。我只是不知道我做错了什么

感谢高级版。

现在，

$（“#songSelector”）。下一步（）

将转到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
。
您知道您的HTML无效，对吗？你不能将
LI
包装在
A
@Roko C.Buljan是的，我知道这只是为了让我的生活更轻松一点，但是我正在改变它，这样就没有标签了。对于所有的问题，我很抱歉，但我是js的新手：）。是否有一种方法可以将类“active”添加到currentSong元素中，以便用户知道歌曲已更改为什么。我在单击和更改歌曲时可以使用它，但当它自动更改时，我无法使用它。再次抱歉：）这不是问题。由于jQuery的链接，您可以这样做：
var testing=currentSong.addClass（'active'）.attr（'href'）和开头部分
var next=currentSong.removeClass（'active'）.next（）希望这至少能让你走上正轨。我刚刚注意到它在第一首和第二首歌曲之间起作用，但它只是重复列表中的第一首歌曲。上述答案似乎也不起作用。我必须将程序重写为jquery，因为目前它是jquery和原始js，所以：（谢谢你的帮助，我会看看我是怎么做的：）