HTML5
How to Preload an Audio in HTML5?
The preload attribute on the <audio> (and <video>) element hints to the browser how much of the media file it should load before playback begins. This helps you balance faster page loads against readiness to play.
The preload Attribute Values
| Value | Meaning |
|---|---|
| none | Do not preload anything; the file loads only when the user presses play. Saves bandwidth. |
| metadata | Load only metadata (duration, dimensions, first frame) but not the media itself. |
| auto | The browser may preload the whole file if it decides it's beneficial. |
Examples
<!-- Save bandwidth: nothing loads until play -->
<audio controls preload="none">
<source src="song.mp3" type="audio/mpeg">
</audio>
<!-- Load just enough to know the duration -->
<audio controls preload="metadata">
<source src="song.mp3" type="audio/mpeg">
</audio>
<!-- Let the browser preload the full file -->
<audio controls preload="auto">
<source src="song.mp3" type="audio/mpeg">
</audio>Choosing a Value
- Use none for pages with many audio clips where most are never played.
- Use metadata when you want to show duration quickly without downloading everything.
- Use auto when the user is very likely to play the audio and instant playback matters.
ℹ️
preload is only a hint. Browsers may ignore it — for example, disabling preloading on metered or mobile connections to save data.