オーディオ再生でマーキーを開始する

Question

htmlのマーキータグにタイムタグを設定する方法を見つけようとしています。 アイデア全体は、マーキー形式でソングの字幕を表示し、ユーザーがクリックしてオーディオを開始したときにのみマーキーを開始することです。

私は（HTML-5で）、オーディオファイルを再生するには、次のコードを使用しています

<audio controls="controls" loop="loop"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element.Please use chrome. 
</audio> 

私は一度にマーキーの開始を自動再生で、このオーディオファイルを設定し、聞かせているやっていますページの読み込み（既定の設定） これは高速ネットワーク上でうまくいきます。低速ネットワークの場合、オーディオコンテンツの読み込みが遅れ、マーキーテキストがオーディオより先に実行される問題が発生します。 これは涼しくない

私はJavaScriptを介してこの問題の解決策を達成することができますか？

Answer 1

マーキータグをどのように開始するのかよく分かりませんが、オーディオ要素のイベントplay - イベントが発生するのを待つ必要があります。自動再生では、要素の再生が開始されるとこのイベントが発生します。

marqueeタグは廃止されましたが、私は代わりにcss-transitionsを使用します。これは簡単に特定のclassNameを追加することで開始できます。

あなたは簡単にJavaScriptでそれにアクセスできるように、メディア要素のidを与える：

<audio id="audio" controls="controls" loop="loop"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element.Please use chrome. 
</audio> 

とJavaScript - コード：

var audioEl = document.getElementById("audio"); 

audioEl.addEventListener('play',function(){ 
    //start your marquee in here 
}); 

あなたがサポートされているすべてのイベントを見つけることができますW3C-Pageのメディア要素によって、いつ発射されるかの説明が記載されています。これは、javascriptのメディア要素とやり取りする方法の概要を示します。

Answer 2

http://jsfiddle.net/kykMs/1/

当初spanであなたの曲のタイトルを入れて：

<span id="song">Artist - Song Title</span> 

次に、ページのロードにmarqueeに置き換えます

window.onload = function() { 
    var elem = document.getElementById("song"); 

    var marq = document.createElement('marquee'); 
    marq.innerHTML = elem.innerHTML; 

    document.getElementById("player").removeChild(elem); 
    document.getElementById("player").appendChild(marq); 
}