HTML Audio

The HTML <audio> element lets you embed sound files directly into your web pages. No extra plugins needed. Just pure HTML.

The audio Element

To add audio to your page, use the <audio> tag. You can specify multiple audio formats so the browser can pick the one it supports.

The controls attribute adds play, pause, and volume buttons. Always include it so users can control the audio.

How It Works

You put <source> tags inside the <audio> element. Each <source> points to a different audio format. The browser picks the first one it can play.

Autoplay Audio

You can make audio start automatically with the autoplay attribute. However, most browsers block autoplay with sound. To autoplay, you must also mute the audio.

Loop and Preload Attributes

The loop attribute makes the audio repeat. The preload attribute tells the browser how to load the audio file.

• preload="auto" – Loads the audio file when the page loads (default).
• preload="metadata" – Loads only metadata (duration, etc.).
• preload="none" – Does not load the audio until the user presses play.

Supported Audio Formats

There are three main audio formats supported by HTML. MP3 is the safest choice because it works everywhere.

Media Types (MIME Types)

When using <source>, always specify the type attribute with the correct MIME type.

Controlling Audio with JavaScript

You can control audio with JavaScript. This example uses buttons to play, pause, and reset the audio.

Quick Summary

• Use <audio> to embed audio. Always include controls.
• Use <source> inside to provide multiple formats. MP3 is the safest.
• Use autoplay muted if you want audio to start automatically.
• Use loop to repeat the audio.
• Use preload to control how the audio loads.
• You can control audio with JavaScript using .play(), .pause(), and .currentTime.

What Just Happened? Let Me Explain

• The <audio> tag is supported in all modern browsers. You no longer need Flash or other plugins.
• MP3 is the most compatible format. Use it for all your web audio.
• Browsers block autoplay with sound to protect users from unexpected noise. If you want autoplay, mute the audio.
• The text inside the <audio> tag only shows in very old browsers that do not support the audio tag.
• WAV files are uncompressed, so they are very large. Use MP3 or OGG for better performance.

HTML Audio Reference