如何在动态创建时检测音频文件的结尾

Question

我使用 jQuery 创建了一个音频对象，如下所示

var player;
$(document).ready(function() {
    player = new Audio();
    player.id = "player";
    player.volume = 0.5;
});

我可以玩，暂停,...成功

player.src = file;
player.play();

这是我遇到麻烦的时候。我正在尝试检测播放器何时停止播放，但它不起作用......

我尝试了以下方法，但没有成功：

$(document).on("ended", "#player", function(e) {
    alert('stop');
});
$("#player").bind("ended", function() {
    alert('stop');
});
$("#player").on("ended", function(e) {
    alert('stop');
});

如何判断播放器何时停止使用 jQUERY？

Answer 1

为什么不使用纯js html5音频元素？

W3学校

var aud = document.getElementById("myAudio");
aud.onended = function() {
    alert("The audio has ended");
};

Answer 2

你离得很近，但应该用addEventListener来ended event

$(document).ready(function() {
    player = new Audio();
    player.volume = 0.5;
    var playerID = document.getElementById('player');
    
playerID.addEventListener("ended", function(e){
  alert('ended');
}, false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls id="player">
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

_{w3schools的音频学分}