<audio> 在特定时间时调用函数

Question

我目前正在做一些有趣的网站，它需要音频提示（我猜是这个名字？）。我希望网站在歌曲播放了 X 时间后做点什么。

我可以使用element.currentTime 轻松获取当前时间，但我不知道怎么说：when element.currentTime == 5.2, runFunction() -如果你明白我的意思。有什么办法可以做到这一点吗？我当前的测试代码：

http://jsfiddle.net/jfL4mcnh/

$("<audio id='audioElement'>").appendTo("body");
$("#audioElement").attr("src", "http://mp3ornot.com/songs/1B.mp3").attr("autoplay", "autoplay");

setInterval(function() {
    //for some reason, $("#audioElement").currentTime won't work, so we're going old fashion
    time = document.getElementById("audioElement").currentTime;
    console.log(time);
}, 1000);

另外，我忘了说这个，我不能在我想要的毫秒内执行setTimeout()，因为音频可能需要一些额外的时间来加载，而实际代码在它已经运行的时候完全运行“看到”，如果你知道我的意思。所以没有倒计时。我需要在这里准确。

Answer 1

如果您需要比ontimeupdate 提供的分辨率更高的分辨率，您可以改用setInterval。

现场演示（仅限声音和警报框！）：

$("<audio id='audioElement'>").appendTo("body");
$("#audioElement").attr("src", "http://mp3ornot.com/songs/1B.mp3").attr("autoplay", "autoplay");

var triggered = false;

var ael = document.getElementById("audioElement");
var interval = setInterval(function(){
    console.log(ael.currentTime);
    if (!triggered && ael.currentTime >= 5.2) {
        triggered = true;
        alert("5.2 seconds reached");
    }
    if (ael.ended) clearInterval(interval);
}, 50);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

JSFiddle 版本：http://jsfiddle.net/jfL4mcnh/15/

Answer 2

嗯，我自己做的..似乎。

http://jsfiddle.net/jfL4mcnh/13/

$("#audioElement").bind("timeupdate", function() {
    var currentTime = parseInt(this.currentTime, 10);
    if(currentTime == 2) { 
        console.log("2 seconds in");
        $(this).unbind("timeupdate");
    }
});

你可以绑定timeupdate到它，然后解绑（显然它运行代码4次，所以我必须解绑它）。

编辑：不，它的更新速度不够快，不足以使其完美。它似乎每增加约 300 毫秒。

Answer 3

看到这个jsfiddle here

我在 JavaScript setInterval() 函数中添加了以下行：

if (time > 5.2) {
    myFunction();
}

myFunction() 执行 console.log，您将在控制台中看到。

我使用> 而不是=== 的原因是由于处理过程中的波动，报告的时间永远不会准确。条件中的布尔值可以解决这个问题：

triggered = false;
if (time > 5.2 && !triggered) {
    triggered = true;
    myFunction();
}