简单的Javascript-HTML5音频，20秒前调用函数.结束

Simple Javascript - HTML5 audio, call function 20 seconds before .ended

本文关键字：调用 函数 结束 20秒 Javascript-HTML5 音频 简单      更新时间：2023-09-26

我正试图在音频剪辑结束前的特定时间（此处为20秒）调用一个函数（目前只是一个警报）。由于某种原因，它不起作用，经过一段时间的故障排除，我仍然不知道为什么它不起。这是我的代码http://jsfiddle.net/QUkHQ/

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-    sample.ogg"
       ontimeupdate="document.getElementById('tracktime').innerHTML = this.currentTime     + ' / ' + this.duration;">
    <p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime" style="display:block;width:100px;">0 / 0</span>  
<button onclick="document.getElementById('track').play();">Play</button>
<button onclick="document.getElementById('track').pause();">Pause</button>
<button onclick="document.getElementById('track').currentTime = 10;">skip</button>
<span id="time" onclick="this.innerHTML = document.getElementById('track').currentTime     ;"> n/a </span>
<script>
document.getElementById("track").addEventListener('timeupdate',checkdif,false)
x=document.getElementById('track');
function checkdif()
{
// alert(document.getElementById('track').currentTime);
document.getElementById('time').innerHTML = x.duration-x.currentTime};
if (x.duration-x.currentTime<20)
{
alert(); 
}
</script>

示例：http://jsfiddle.net/howderek/Y2BCP/

问题出在条件中：if (x.duration-x.currentTime<20)，因为当我存储一个变量currentTime，然后检查它是否小于20时，我得到了预期的结果。此外，我没有看到单独的ontimeupdate和addEventListener的用途，所以我将所有内容都转移到了由事件侦听器调用的函数中。

此外，我建议将您的脚本移动到一个外部文件中，这样您的HTML就不会被脚本淹没。

Javascript（确保它在头部）：

var alertSent = false;
var obj = document.getElementById('track');
document.getElementById("track").addEventListener('timeupdate', checkTime, false)
function checkTime() {
    document.getElementById('tracktime').innerHTML = obj.currentTime + ' / ' + obj.duration;
    var timeRemaining = obj.duration - obj.currentTime;
    document.getElementById('time').innerHTML = timeRemaining;
    if (timeRemaining < 20 && !alertSent) {
        alert("Hello");
        alertSent = true;
    }
}

HTML:

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg">
    <p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime" style="display:block;width:100px;">0 / 0</span>
<button onclick="document.getElementById('track').play();">Play</button>
<button onclick="document.getElementById('track').pause();">Pause</button>
<button onclick="document.getElementById('track').currentTime = 10;">skip</button>
<span id="time"> n/a </span>
相关文章：