<audio>在特定时间的呼叫功能

我目前正在做一些有趣的网站，它需要音频线索（我认为这是个名字？）。当歌曲播放X时间时，我希望网站做些什么。<audio>在特定时间的呼叫功能

我可以很容易地使用element.currentTime当前的时间，但我不知道怎么说：当element.currentTime == 5.2，runFunction（） - 如果你知道我的意思。有没有什么方法可以做到这一点？我目前的测试代码：

< ---- AUDIO开始播放---->
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()，并在打准确的时刻，我想以毫秒为单位，因为音频可能需要一些额外的时间来加载，而实际的代码恰好在“看到”时运行，如果你知道我的意思。所以没有倒计时。我需要在这里确切。

来源

2015-09-18 MortenMoulder

看到这个jsfiddle here

我已经添加了以下行的JavaScript setInterval()功能：

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

myFunction()做了console.log，您会在控制台中看到。

我使用>而不是===的原因是由于处理波动，报告的时间从未精确。布尔条件将解决这个问题：

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

来源

2015-09-18 21:49:59

这是行不通的。阅读我刚刚添加的问题的最后部分，因为我忘了说这个。音频文件可能需要额外的时间才能加载 – MortenMoulder

这不是倒数计时，它会周期性轮询，然后在音频播放达到设定的时间长度后进行响应，如果音频需要一段时间才能加载，则相应地会在当前时间较长时间报告为5.2秒 - 我在这里模拟了这个：http://jsfiddle.net/jfL4mcnh/12/ –

是的，但是如果音频文件迟了3秒，会发生什么情况，因为请求滞后？然后Javascript将会出错:) – MortenMoulder

嗯，我已经做了它自己..看来。

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倍，所以我必须要解除绑定）。

编辑：不，它不会更新得足够快，使它完美点。它似乎增加了每〜300ms。

来源

2015-09-18 21:56:25 MortenMoulder

它运行代码4次，因为currentTime在'2.2 ''''2.4'，'2.6'等等，而不是将当前时间float解析为一个int，请参阅我的答案以获得更清晰的解决方案。谢谢！ –

啊，这是有道理的。我会立即回复你的。 – MortenMoulder

另一个需要注意的重要的事情是，如果浏览器断断续续，并且在第二秒钟内没有注册“timeupdate”事件，则此解决方案将失败。 –

如果您需要比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/

来源

2015-09-18 21:58:44

这是接近我的..不是吗？ 'ontimeupdate'在理论上应该和'.bind（“timeupdate”）'是一样吗？我发现我的时间更新不会立即更新，所以我无法在5.25秒内完成更新。它会像0.888,1.212,1.559等一样增加。这并不是0.001，0.002。你也是一样的:( – MortenMoulder

@Snorlax如果你需要更好的分辨率，你可以使用'setInterval'而不是'ontimeupdate'。我得到的最佳分辨率约为50ms，我认为没有 –

我想我可以使用setInterval，例如当currentTime> 5.25时停止轮询，然后让它每5-10毫秒轮询一次，不应该这样做。在客户端PC上施加很大的负载..对吗？ – MortenMoulder

<audio>在特定时间的呼叫功能

回答

相关问题