Come impedire l'audio HTML5 dal download/streaming pre-carico?

Question

Ho un sito Web a pagina singola che elenca una raccolta di lettori audio HTML5. Il problema è il sito è diventato lento perché i seguenti browser iniziano predownloading i contenuti (mp3 e ogg)

Internet Explorer 
Google Chrome 
Firefox 
Safari 
(probably Opera) 

io uso il codice base per implementare i giocatori. C'è un modo per impedire ai browser di eseguire il download dei file audio e funzionano solo quando fanno clic su Play?

<audio controls="controls" height="32" width="300" tabindex="0"> 
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source> 
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source> 
</audio> 

Answer 1

<audio controls="controls" preload="none"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element. 
</audio> 

Nota - preload="none" - può essere utilizzato con video HTML5 e AUDIO HTML5.

L'attributo preload è supportato in tutti i principali browser, ad eccezione di Internet Explorer e Opera.

Answer 2

MSIE rappresenta ancora circa il 30% di tutto il traffico Web, quindi preload="none" è solo una soluzione parziale. In poche pagine dove ho avuto questo problema, aggiungo un piccolo script per le mie intestazioni di pagina:

<script type="text/javascript"> 
function addAudio(t) { 
    var l=t.innerHTML.length; 
    var audioName=t.parentElement.id; 
    if(t.children.length==0) { 
    t.innerHTML=t.innerHTML+'&nbsp; &nbsp; <audio controls="controls"><source src="'+ 
     audioName+'.ogg" type="audio/ogg" /><source src="'+ 
     audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>'; 
    } 
} 
</script> 

e quindi utilizzare DHMTL aggiungere dinamicamente il tag audio, ad esempio:

<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li> 

Ciò fa è definire un elemento dell'elenco contenente un intervallo di testo. Quando la persona che esplora i clic sul testo con spanning, il javascript attiva e aggiunge il tag <audio>. In alternativa, puoi utilizzare l'attributo onmouseover in modo che il tag audio venga aggiunto al passaggio del mouse.

Aggiungere l'attributo preload al codice generato, se lo si desidera. Questo è l'approccio semplice, ma se si sta già utilizzando jQuery sulla tua pagina web, noto che questo offre alternative eleganti.