Cómo evitar que el audio HTML5 se descargue o reproduzca previamente en la carga?

Question

Tengo un sitio web de una sola página que enumera una colección de reproductores de audio HTML5. El problema es que el sitio se ha convertido lento debido a los siguientes navegadores comienzan predownloading el contenido (MP3 y OGG)

Internet Explorer 
Google Chrome 
Firefox 
Safari 
(probably Opera) 

utilizo el código básico para implementar los jugadores. ¿Hay alguna manera de evitar que los navegadores descarguen previamente los archivos de audio y solo funcionen cuando hacen clic en reproducir?

<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" - se puede utilizar con HTML5 y VIDEO AUDIO HTML5.

El atributo de precarga es compatible con todos los principales navegadores, excepto Internet Explorer y Opera.

Answer 2

MSIE todavía representa alrededor del 30% de todo el tráfico web, por lo que preload="none" es solo una solución parcial. En algunas páginas en los que tenía este problema, añado un pequeño script a mi página de cabeceras:

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

y luego utilizar DHTML para agregar dinámicamente la etiqueta de audio, por ejemplo:

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

Lo que esto lo hace es definir un elemento de lista que contiene un lapso de texto. Cuando la persona que navega hace clic en el texto distribuido, el código JavaScript se activa y agrega la etiqueta <audio>. Alternativamente, puede usar el atributo onmouseover para que la etiqueta de audio se agregue al desplazarse.

Agregue el atributo preload al código generado si lo desea. Este es el enfoque simple, pero si ya está usando jQuery en su página web, observo que esto ofrece alternativas elegantes.