HTML音频 - 检测位置与jQuery [英] HTML Audio - Detecting position with jQuery
本文介绍了HTML音频 - 检测位置与jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
反正是有使用HTML5音频标记时有使用DOM的EventListener或动作/ jQuery来播放过程中或结束触发一个事件？
这回答链接currentTime的，但有没有例子，伪$ C $下面C。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT;身体GT;＆LT;音响控制=控制＆GT;
＆lt;信源SRC =file.oggTYPE =音频/ OGG/＆GT;
＆lt;信源SRC =file.mp3TYPE =音频/ MPEG/＆GT;
你的浏览器不支持音频元素。
＆LT; /音频＆GT;＆所述; SCRIPT SRC =的jquery.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（音频）。的addEventListener（结束，函数（）{
警报（歌已经结束）;
}）;
$（音频）。的addEventListener（'20 2.2，函数（）{
警报（您目前在轨道20.2秒）;
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
您可以试试这个：
获取音频的持续时间，使警报的基础上，无论你需要的currentTime的，视觉提示。
audio.addEventListener（timeupdate功能（）{
VAR持续时间=的document.getElementById（'时间'）;
变种S = parseInt函数（audio.currentTime 60％）;变种M = parseInt函数（（audio.currentTime / 60）％60）;
duration.innerHTML = M +'。' + S +'秒';
}，FALSE）;
Is there anyway when using the HTML5 Audio tag to have an eventListener or action using Dom/jQuery to fire an event during playback or at the end?
This answer links to currentTime but there are no examples, Pseudo code below.
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="file.ogg" type="audio/ogg" />
<source src="file.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("audio").addEventListener("end", function () {
alert("song has ended");
});
$("audio").addEventListener('20.2', function () {
alert("your currently at 20.2 seconds in the track");
});
});
</script>
</body>
</html>
解决方案
You can try this:
Get the duration of the audio and make an alert based on the currentTime and display alert wherever you require.
audio.addEventListener("timeupdate", function(){
var duration = document.getElementById('duration');
var s = parseInt(audio.currentTime % 60); var m = parseInt((audio.currentTime / 60) % 60);
duration.innerHTML = m + '.' + s + 'sec';
}, false);
这篇关于HTML音频 - 检测位置与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
