如何檢測HTML5音頻標籤是否已被偵聽至少x秒？

Question

我想記錄用戶收聽音頻元素的時間超過5秒鐘。我如何使用HTML5檢測到這一點？

Answer 1

我會處理播放事件，然後在完成時使用setTimeout呼叫音軌。像這樣的東西（僞代碼）：

var timeHandler = null; 

// if they stop listening, don't give them the alert 
    myAudioElement.addEventListener('stop', function() { 
    if (timeHandler) clearTimeout(timeHandle); 
    }); 

// when they start to play, set an event to pop up 5 seconds later 
    myAudioElement.addEventListener('play', function() { 
     timeHandler = setTimeout(5000,function() { 
      // here I would make some kind of ajax call to log the event 
      alert("it's been 5 seconds!"); 
     }); 

一如既往，根據您的需要，這可能會變得更加複雜。您也可以使用ontimeupdate事件來追蹤播放頭當前所在的位置。有關HTML5音頻事件的參考，看看這個頁面：

https://developer.mozilla.org/en/DOM/Media_events

祝你好運！