Preload attribute for audio assets

The HTML preload attribute for audio files creates no-JavaScript pre- or lazy-loading those assets.

auto (default) tells the browser to start downloading the asset immediately.
none tells the browser NOT to start downloading the asset immediately, but wait until the asset is nearly within the viewport.
metadata tells the browser to download ONLY the asset’s metadata (length, etc.), and wait until the asset is nearly within the viewport to download it.
Note that metadata is NOT implemented consistenly across browsers, so it may download more than just metadata.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

HTML

<!-- Single source -->
<audio
  src="audio.m4a" 
  controls
  preload="auto">
</audio>

<br>

<!-- Multiple sources -->
<audio controls preload="auto">
  <source src="audio.m4a" type="audio.m4a" />
  <source src="audio.ogg" type="audio.ogg" />
  <p>
    Your browser doess not support the this feature. Download the <a href="audio.m4a" download="audio.m4a">M4A</a> or <a href="audio.ogg" download="audio.ogg">OGG</a> audio.
  </p>
</audio>

CSS

No special CSS required.

JS

No JS required.

Baseline

[`audio`](https://webstatus.dev/features/audio)

CodePen

See the Pen on CodePen.