HTML audio tag generator for podcasts, music and sound clips

How to use the audio tag generator

1. Enter the Sources (one URL per line), the preferred format first.
2. Tick Controls (on by default), and Autoplay, Loop or Muted if needed.
3. Choose Preload: metadata, none or auto.
4. Add a Transcript link (optional).
5. Copy the code and read any warning below it.

What it does and when to use it

The audio element gives you a native player for podcasts, interviews, music samples, pronunciation clips and sound effects, with keyboard support built in. Unlike an embedded third-party player, it loads no extra scripts and works offline once the file is cached.

The generator writes one source per file so the browser can choose a format it supports, and a fallback paragraph with a download link for the rare browser that can play none. A podcast page typically needs the transcript link too. For a video file, use the HTML Video Tag Generator, which adds captions and a poster. To count the media elements on a finished page, paste it into the HTML Tag Counter.

How it works

Each line in the sources box becomes a source element. The MIME type is read from the file extension:

Other extensions get no type, and the browser has to start downloading to find out whether it can play the file. The fallback link points to the last source, usually the most widely supported. The code is built in your browser; there is no preview because the file paths are placeholders.

Worked examples

The default podcast episode:

<audio controls preload="metadata">
  <source src="/audio/episode-12.ogg" type="audio/ogg">
  <source src="/audio/episode-12.mp3" type="audio/mpeg">
  <p>Your browser cannot play this audio. <a href="/audio/episode-12.mp3" download>Download it</a>.</p>
</audio>
<p><a href="/podcast/episode-12-transcript">Read the transcript</a></p>

A looping WAV clip, no transcript: <audio controls loop preload="metadata"> with <source src="/a.wav" type="audio/wav">.

Opus and M4A with autoplay. Sources /audio/intro.opus and /audio/intro.m4a, preload none, Autoplay ticked. The types are audio/ogg and audio/mp4, and the tool warns: “Most browsers block autoplay with sound until the visitor interacts with the page.”

Limits and tips

• Uncompressed WAV files are large. For speech, an MP3 at a modest bitrate is usually much smaller and sounds fine.
• The transcript link opens a separate page. For short clips, you can put the text directly under the player instead.
• To add a caption or credit under the player, wrap both in a figure with a figcaption, as the HTML Figure & Caption Generator does for images.