如何检索HTML5音频播放器的当前播放时间？ （mediaelement.js）

Question

我在网站上使用HTML5音频标签。我需要在播放时拉出轨道的当前时间，最好是在几秒钟内。最后，我需要利用这段时间与页面上的其他元素进行交互，但似乎无法弄清楚如何在播放时实时检索轨道的当前时间。

任何帮助将不胜感激

Answer 1

您需要向音频播放器添加事件侦听器。这些事件都在“媒体事件”下的http://www.w3schools.com/html5/html5_ref_eventattributes.asp列出。创建MediaElement播放器时，可以在“success”功能下添加eventlisteners。

使用此方法可确保它也适用于Flash后备。

mediaElement = new MediaElementPlayer('audio',{
//options etc

// method that fires when the Flash or Silverlight object is ready
success: function (mediaElement, domObject) {   

   // add event listeners
   mediaElement.addEventListener('timeupdate', function(e) {
       onVideoTimeUpdate(e);
   }, false);

   mediaElement.addEventListener('pause', function(e) {
       onVideoPaused(e);
   }, false);

   mediaElement.addEventListener('play', function(e) {
       onVideoPlayed(e);
   }, false);

   //etc
}

function onVideoTimeUpdate(e){
    //something to do on the time update event
}

如果您只是使用HTML5音频标签，则可以像这样添加事件监听器

myaudio=document.getElementById("audio1");
myaudio.addEventListener("timeupdate", function(e)
  {
     //something to do on the time update event
   }
);