mediaelement.js - 如何在现场播放时检索 HTML5 音频播放器的当前时间？（媒体元素.js）

Question

我在网站上使用 HTML5 音频标签。我需要在播放曲目时拉出当前时间，最好以秒为单位。最终，我将需要利用这段时间与页面上的其他元素进行交互，但似乎无法弄清楚如何在曲目播放时实时检索当前时间。

任何帮助，将不胜感激

Answer 1

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

使用此方法可确保它也适用于 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
   }
);