How to prevent HTML5 audio from predownload / streaming on load?

performance html audio audio-streaming
TheBlackBenzKid picture TheBlackBenzKid · Aug 4, 2012 · Viewed 15.9k times · Source

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>

Answer

M1th picture M1th · Aug 4, 2012 
<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.

Related questions

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
How to change the playing speed of videos in HTML5?

How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.Any help would be appreciated!

Read More
Fastest method to escape HTML tags as HTML entities?

I'm writing a Chrome extension that involves doing a lot of the following job: sanitizing strings that might contain HTML tags, by converting <, > and & to &lt;, &gt; and &amp;, respectively. (In other words, the …

Read More