HTML5

How to Preload an Audio in HTML5?

The preload attribute on an HTML5 <audio> (or <video>) element hints to the browser how much of the media it should download before the user presses play. It helps balance faster start-up against saving bandwidth.

The preload Values

Value	Meaning
none	Do not preload — save bandwidth; load only when the user plays
metadata	Load only metadata (duration, dimensions), not the full media
auto	Browser may preload the whole file for instant playback

ℹ️

preload is only a HINT. Browsers may ignore it based on the device, connection, or data-saver settings. On mobile, browsers often behave like preload="none" to conserve data.

Runnable Example

Three audio elements with different preload strategies

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio Preload Demo</title>
</head>
<body>
  <h2>preload="none"</h2>
  <audio controls preload="none">
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  </audio>

  <h2>preload="metadata"</h2>
  <audio controls preload="metadata">
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  </audio>

  <h2>preload="auto"</h2>
  <audio controls preload="auto">
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  </audio>
</body>
</html>

Which Value Should You Use?

Use none when the media is unlikely to be played, to save data.
Use metadata when you want the duration shown but not the whole file.
Use auto when instant playback matters and bandwidth is not a concern.

Key Takeaways

preload hints how much media to load before play: none, metadata, or auto.
It is a hint — browsers may override it, especially on mobile.
Choose based on the trade-off between start speed and bandwidth.