19

I have a single page website which lists a collection of HTML5 audio players. The problem is the site has become slow because the following browsers start predownloading the content (mp3 and ogg)

Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)

I use the basic code to implement the players. Is there a way I can prevent the browsers from predownloading the audio files and only work when they click 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>
TheBlackBenzKid
  • 26,324
  • 41
  • 139
  • 209
  • 1
    I think also the height and width are spat out by the browser so by default you can leave it empty, just ` – AlphaApp Aug 03 '12 at 22:54

2 Answers2

40
<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" - can be used with VIDEO HTML5 and AUDIO HTML5.

The preload attribute is supported in all major browsers, except Internet Explorer and Opera.

M1th
  • 621
  • 1
  • 7
  • 11
3

MSIE still accounts for some 30% of all web traffic, so preload="none" is only a part solution. In a few pages where I had this problem, I add a small script to my page headers:

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

and then use DHMTL to dynamically add the audio tag, for example:

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

What this does is to define a list item containing a text span. When the person browsing clicks on the spanned text, the javascript fires and appends the <audio> tag. You could alternatively use the onmouseover attribute so that the audio tag is added on hover.

Add the preload attribute to the generated code if you wish. This is the simple approach, but if you are already using jQuery on your webpage, I note that this offers elegant alternatives.

TerryE
  • 10,724
  • 5
  • 26
  • 48
  • Can you please either post the jQuery alternative and fully explain the code and what it is you mean? +1 for the effort, this put me off `Γεια σας` what is this code doing etc? – TheBlackBenzKid Aug 04 '12 at 14:39
  • I've updated my answer. Sorry, I just pulled a line from one of my pages "Γεια σας" is just some character data in this example ( it's Greek for "hello"), just like "Your browser does not support..." is in yours. The jQuery example is a different Q&A, and not really something that I want to cover here. It's just that I regard this as advanced use of javascript and not really appropriate in your case if you need explanation of this simple action routine. – TerryE Aug 04 '12 at 17:23