performance - reproducir - ¿Cómo prevenir el audio HTML5 desde la descarga previa/transmisión en carga?

insertar audio mp3 en html

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 vuelto lento porque los siguientes navegadores comienzan a descargar el contenido (mp3 y ogg)

Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)

Uso 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 usar con VIDEO HTML5 y AUDIO HTML5.

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

Answer 2

MSIE todavía representa aproximadamente el 30% de todo el tráfico web, por lo que preload="none" es solo una solución parcial. En algunas páginas donde tuve este problema, agregué un pequeño script a los encabezados de mi página:

<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 use DHMTL para agregar dinámicamente la etiqueta de audio, por ejemplo:

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

Lo que hace esto es definir un elemento de lista que contenga un lapso de texto. Cuando la persona que navega hace clic en el texto distribuido, el 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 de 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.