HTML <audio> with preload Attribute

You are Here:

HTML <audio> with preload Attribute

The preload attribute is intended to provide a hint to the web browser about what the author thinks will lead to the best user experience.

auto

The auto attribute value specifies that the browser should load the entire audio file when the page loads.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <audio controls preload="auto"> <source src="/mario.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>

Attribute Value

ValueExplanation
autoThe browser should load the entire audio file when the page loads.
metadataThe browser should load only metadata when the page loads i.e) it will not load the entire audio file during page load.
noneThe browser should NOT load mute option, sound controller, and audio file until the user tries to play the audio.

metadata

The metadata attribute value specifies that the browser should load only metadata when the page loads i.e) it will not load the entire audio file during page load.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <audio controls preload="metadata"> <source src="/mario.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>

none

The none attribute value specifies that the browser should NOT load mute option, sound controller, and audio file until the user tries to play the audio.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <audio controls preload="none"> <source src="/mario.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author