Comment empêcher l'audio HTML5 de télécharger / diffuser en charge?

J'ai une seule page web qui répertorie une collection de HTML5 audio joueurs. Le problème est que le site est devenu lent, car les navigateurs suivants commencer predownloading le contenu (mp3 et ogg)

Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)

- Je utiliser le code de base pour mettre en œuvre les joueurs. Est il possible que je peux empêcher les navigateurs de predownloading les fichiers audio ne fonctionnent que lorsqu'ils cliquent sur jouer?

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

source d'informationauteur TheBlackBenzKid

  1. 21
    <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>

    Note - preload="none" - peut être utilisé avec la VIDÉO HTML5 et AUDIO HTML5.

    De la précharge de l'attribut est pris en charge dans tous les principaux navigateurs, sauf Internet Explorer et Opera.

  2. 3

    MSIE représentent encore environ 30% de tout le trafic internet, de sorte preload="none" n'est qu'une partie de la solution. En quelques pages, où j'ai eu ce problème, j'ai ajouter un petit script pour mon en-têtes de page:

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

    et ensuite utiliser DHMTL ajouter dynamiquement la balise audio, par exemple:

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

    Ce que cela fait, c'est de définir un élément de la liste contenant un texte d'envergure. Lors de la navigation par personne clique sur le fractionné texte, le javascript incendies et ajoute le <audio> tag. Vous pouvez également utiliser le onmouseover attribut de sorte que la balise audio est ajouté sur le vol stationnaire.

    Ajouter le preload attribut pour le code généré si vous le souhaitez. C'est l'approche simple, mais si vous utilisez déjà jQuery sur votre page web, je remarque que cette offre d'élégantes solutions de rechange.