Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 589
TheBlackBenzKid Avatar asked Aug 03 '12 22:08

TheBlackBenzKid


People also ask

How do I stop the audio tag from downloading?

“disable download audio html5” Code Answer's Just add controlsList="nodownload" in your video tag.

What is preload in audio HTML?

The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience.

Does HTML5 support MP3?

HTML5 introduced <audio> tag, as well as the JavaScript APIs, which allow the browser to play audio without the need for an external plugin. The most supported codecs for playing audio in HTML5 are Ogg Vorbis, MP3, and Wav.

How do you center an audio player in HTML?

If you want to center your player, you can use the optional <div align="center"> tag. "controls" means the player displays the audio controls. Without it, the sound cannot be turned off.


1 Answers

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

like image 147
M1th Avatar answered Sep 22 '22 05:09

M1th