Selezione intermittente su riproduzione audio

Question

Sto cercando di trovare un modo per impostare un tag temporale per il tag di selezione in html. L'idea è quella di visualizzare i sottotitoli di un brano in formato tendone e di avviare il riquadro di selezione solo quando l'utente fa clic per avviare l'audio.

Sto usando il seguente codice per riprodurre il file audio, (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> 

Quello che sto facendo è impostato questo file audio su autoplay, e lasciare che l'inizio tendone al momento della caricamento della pagina (che è l'impostazione predefinita) ma questo funziona bene su reti ad alta velocità, per reti a bassa velocità il problema che si pone è che il caricamento del contenuto audio viene ritardato e quindi il testo di selezione inizia a funzionare prima dell'audio. che non è bello

Per favore mi consigli come posso realizzare una soluzione a questo problema tramite javascript?

Answer 1

Non sono sicuro di come si avvia il tag di selezione, ma è necessario attendere l'evento play - Evento del proprio elemento audio. La riproduzione automatica attiva questo evento all'avvio dell'elemento.

Si noti che il marquee -tag è deprecato, vorrei invece utilizzare le transizioni di css, che possono essere facilmente attivate per iniziare aggiungendo un nome di classe specifico.

Lascia la tua media-Element un id, in modo da poter facilmente accedere con 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> 

E il JavaScript - Codice:

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

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

È possibile trovare tutti gli eventi che sono supportati per elementi multimediali su W3C-Page con una descrizione di quando vengono generati. Questo ti dà una panoramica su come puoi interagire con elementi multimediali in javascript.

Answer 2

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

Metti il ​​tuo titolo del brano in un span inizialmente:

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

Poi, il caricamento della pagina sostituirlo con 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); 
}