• 0

html 5 audio tag


Question

I've started having my first look at the changes for HTML 5. I'm getting annoyed with the new audio element though. I'm just using a simple set up:

<audio controls="controls">
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio> 

Whenever a page with this code in the audio file always auto-loads. This is pretty useless. If I have a page with a good number of audio elements my bandwidth will get sucked up!

Does anyone here know of a way to stop the file from auto loading?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

<audio controls="controls" preload="none">
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio> 

change none to auto if you want to auto load it. or change to meta if you just want the meta data to be loaded.

Link to comment
Share on other sites

  • 0

<audio controls="controls" preload="none">
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio> 

change none to auto if you want to auto load it. or change to meta if you just want the meta data to be loaded.

Thank you! Thats exactly what i was looking for!

Link to comment
Share on other sites

  • 0

Thank you! Thats exactly what i was looking for!

Sorry to be the bear of bad news but chrome (and safari I guess) doesn't yet support the preload attribute.

http://www.google.co.uk/search?source=ig&hl=en&rlz=&q=chrome+ignores+preload%3D%22none%22&btnG=Google+Search&aq=f&oq=

I'm sure some javascript whizkid can write us code involving an <img> and the onclick thing mentioned briefly here:

http://daringfireball.net/2009/12/html5_video_unusable

In a quick wrap up of what would be nice; If someone out there could make an img onclick that linked to some javascript which then makes it show the audio tag... that would be great!

Apologies for confusing writing.

Link to comment
Share on other sites

  • 0

document.getElementById('img_tag').addEventListener('click', function() {
    var audio_tag = new Audio('http://example.com/file.wav');
    document.body.appendChild(audio_tag);
    audio_tag.play();
}, false);

You'd probably want something smarter though (actually check to see if the <audio> tag is supported, then if the type is supported (not every browser plays MP3), probably re-use the audio element instead of recreating it, etc.)

Link to comment
Share on other sites

This topic is now closed to further replies.