Audio Player Generator
Generate HTML5 audio markup with controls, autoplay, loop and preload settings.
HTML5 audio element with controls and preload options.
Live preview
<audio controls preload="metadata">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>About the audio player generator
The audio element gives you a native player with no JavaScript. The preload attribute is the one worth thinking about: metadata fetches just enough to know the duration, auto downloads the file immediately, and none waits until play is pressed.
On a page with several clips, metadata is usually the right balance.
How to use it
- 1Set the audio source.
- 2Keep controls on unless you are building your own UI.
- 3Choose a preload strategy.
- 4Copy the HTML.
Questions
Which preload value should I use?
metadata for most cases: the duration shows without downloading the whole file. Use none on pages with many clips, and auto only when playback is very likely.
Can I style the audio player?
Barely. The native controls are drawn by the browser. For full control, hide them and build your own UI against the media API.
Does audio autoplay work?
Only when muted, which defeats the purpose. Assume it will not play until the user acts.