Question

我目前正在做一些有趣的网站，这需要音频提示（我假设这是名字？）。我想让网站做一些事情，当这首歌已经播放了很长时间。

我可以使用element.currentTime轻松获取当前时间，但我不知道如何说： 当element.currentTime == 5.2，runFunction（） - 如果你知道我的意思。有什么办法可以做到吗？我目前的测试代码：

＆lt; ----音频将开始播放----＆gt;
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。

现场演示（仅限声音和提醒框）：

＆＃13;

$("<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);

＆＃13;

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

＆＃13;

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毫秒。

<audio>在特定时间时调用功能

2 个答案: