Starten der Laufschrift bei der Audiowiedergabe

Question

Ich versuche herauszufinden, wie eine Zeitmarke für das Laufschrift-Tag in HTML festgelegt werden kann. Die ganze Idee besteht darin, die Untertitel eines Titels im Marquee-Format anzuzeigen und den Laufrahmen nur dann zu starten, wenn der Benutzer auf das Starten des Audiomaterials klickt.

ich den folgenden Code bin mit der Audiodatei abzuspielen, (in 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> 

Was ich tue, diese Audiodatei auf automatische Wiedergabe eingestellt ist, und lassen Sie den Marquee-Start zum Zeitpunkt der Seite lädt (das ist die Standardeinstellung) aber das funktioniert gut in Hochgeschwindigkeitsnetzwerken, für niedrige Geschwindigkeiten das Problem, das entsteht, ist, dass das Laden des Audioinhalts verzögert wird und daher der Laufschrifttext beginnt, vor dem Audio zu laufen. was ist nicht cool

Bitte beraten Sie mich, wie kann ich eine Lösung für dieses Problem über Javascript erreichen?

Answer 1

Ich bin nicht sicher, wie Sie Ihr Marquee-Tag starten, aber Sie sollten auf das play - Event Ihres Audioelements warten. Autoplay löst dieses Ereignis aus, wenn das Element abgespielt wird.

Beachten Sie, dass das marquee-Tag veraltet ist, ich würde stattdessen CSS-Übergänge verwenden, die leicht ausgelöst werden können, indem Sie einen bestimmten Klassennamen hinzufügen.

Geben Sie Ihre Medien-Element eine ID, so können Sie es leicht mit Javascript zugreifen:

<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> 

und die JavaScript - Code:

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

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

Sie alle Ereignisse finden, die unterstützt werden von Media-Elementen auf der W3C-Page mit einer Beschreibung, wann sie ausgelöst werden. Dies gibt Ihnen einen Überblick darüber, wie Sie mit Medienelementen in Javascript interagieren können.

Answer 2

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

Legen Sie Ihre Song-Titel in einem span zunächst:

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

Dann beim Laden der Seite ersetzen Sie es mit 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); 
}