6

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 を使用してこの問題を解決する方法を教えてください。

4

2 に答える 2

2

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

marquee-tag は非推奨であることに注意してください。代わりに css-transitions を使用します。これは、特定の className を追加することで簡単に開始できます。

media-Element に id を付けて、javascript で簡単にアクセスできるようにします。

<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 でメディア要素を操作する方法の概要が得られます。

于 2012-06-14T17:27:32.540 に答える
1

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);
}
于 2012-06-14T17:28:14.940 に答える