如何使用 jquery 和 html5 检测音频文件的结尾
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15586209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to detect end of audio file using jquery and html5
提问by RoyS
I've got this jquery code and html to work OK for an English language training site.
我有这个 jquery 代码和 html 可以在英语培训网站上正常工作。
$(document).ready(function() {
$("p").hover(
function() {
$(this).css({"color": "purple", "font-weight" : "bolder"});
},
function() {
$(this).css({"color": "black", "font-weight" : ""});
}
);
$("p").click(function (event) {
var element = $(this);
var elementID = event.target.id;
var oggVar = (elementID +".ogg");
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', oggVar);
audioElement.load();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
audioElement.play();
});
});
<div>
<p id="one"> this is the first paragraph</p>
....
<p id="four"> this is the fourth paragraph</p>
....
</div>
the problem is that if text is clicked on while an audio file is playing (or double clicked) then the second file (or the same file) starts playing. So I end up with two files playing simultaneously. I need to prevent this. I think that the 'ended' event is relevant but, despite looking some examples, I can't see quite how to detect if a file is playing and wait until it's finished before allowing a second file to start (or even prevent it from playing at all). Any help would be much appreciated :)
问题是，如果在播放（或双击）音频文件时单击文本，则第二个文件（或同一文件）开始播放。所以我最终同时播放了两个文件。我需要防止这种情况。我认为“结束”事件是相关的，但是，尽管看了一些例子，我还是看不出如何检测一个文件是否正在播放并等到它完成后再允许第二个文件开始（甚至阻止它播放）一点）。任何帮助将非常感激 ：）
回答by asgoth
You can add event listeners for the ended and playingevents. Also, why creating a audio tag via javascript? I would just create an empty hidden audio tag:
您可以为结束和播放事件添加事件侦听器。另外，为什么要通过 javascript 创建音频标签？我只想创建一个空的隐藏音频标签：
<audio id='myAudio' autoplay='autoplay'></audio>
You have two options:
您有两个选择：
- disable/enable the button/link when audio is playing/stopped (preferred imho)
- ignore clicks when already playing
- 音频播放/停止时禁用/启用按钮/链接（首选 imho）
- 已经播放时忽略点击
Then add two eventlisteners to it:
然后向其中添加两个事件侦听器：
var playing = false;
$('#myAudio').on('playing', function() {
playing = true;
// disable button/link
});
$('#myAudio').on('ended', function() {
playing = false;
// enable button/link
});
$("p").click(function (event) {
if(!playing) {
var element = $(this);
var elementID = event.target.id;
var oggVar = (elementID +".ogg");
var audioElement = $('#myAudio')[0];
audioElement.setAttribute('src', oggVar);
audioElement.play();
}
});
回答by ShacharW
***var audioElement = null;***
$("p").click(function (event) {
***if (audioElement) {
audioElement.pause();
}***
var element = $(this);
var elementID = event.target.id;
var oggVar = (elementID +".ogg");
audioElement = document.createElement('audio');
audioElement.setAttribute('src', oggVar);
audioElement.load();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
audioElement.play();
});
