In this section, we will learn what preload attribute is and how it works.

What is preload Attribute in HTML audio Tag?

The audio file that we set for HTML <audio> element is basically an external resource and should be downloaded in order to be played on the webpage.

But when does this downloading process start? Is it at the beginning of page loading? Is it after users clicked the play button?

We can explicitly specify when the audio file should be downloaded with the help of `preload attribute.

Note: the possible values of this attribute are explained in the rest of this section.

HTML preload Attribute in audio Tag Syntax:

<audio preload = "none | metadata | auto"> </audio>

audio Tag preload Attribute Values

There are three values that could be used for the preload attribute.

1. none: if the value of the preload attribute is set to “none” that means the download should only start when users clicked the play button.
2. metadata: if the value of the preload attribute is set to “metadata” that means the browser should only download the metadata related to the audio file (like its length etc.) but the audio file itself is delayed until users clicked the play button.
3. auto: this value means the process of downloading the audio file should begin automatically even if users didn’t start to play the audio file!

Example: using preload attribute in HTML audio tag

See the Pen using preload attribute in HTML audio tag by Omid Dehghan (@odchan1) on CodePen.