mediaelement.js - ライブで再生されている HTML5 オーディオ プレーヤーの現在の時刻を取得するにはどうすればよいですか? (メディアエレメント.js)

Question

Web サイトで HTML5 オーディオ タグを使用しています。再生中のトラックの現在の時間を、できれば秒単位で取得する必要があります。最終的には、この時間を使用してページ上の他の要素と対話する必要がありますが、トラックの再生中にリアルタイムでトラックの現在の時間を取得する方法がわかりません。

どんな助けでもいただければ幸いです

Answer 1

オーディオプレーヤーにイベントリスナーを追加する必要があります。イベントはすべてここhttp://www.w3schools.com/html5/html5_ref_eventattributes.aspの「メディアイベント」の下にリストされています。MediaElementプレーヤーを作成するときに、「success」関数の下にイベントリスナーを追加できます。

この方法を使用すると、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
   }
);