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

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

你是如此接近，但应该使用 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 的音频来源}

Answer 2

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

W3Schools

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

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

How to detect end of audio file when created dynamically?

javascript

jquery

html5-audio