簡單的Javascript - HTML5音頻，通話功能20秒前.ended

Question

我想在音頻剪輯結束之前的特定時間（此處爲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> 

Answer 1

例子：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>