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

Question

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

Answer 1

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:

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

Γεια σας

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