Audio Tag in HTML - Syntax, Attributes, Formats, and Examples

HTML <audio> Tag: Let Your Page Speak

Want your webpage to play a melody, voice clip, or sound effect? The <audio> tag makes it easy. With a few lines of code, you can embed sound in your page — no plugins needed, no extra fuss.

Basic Syntax

<audio controls>
  <source src="banana-sound.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

[ Audio player appears here with play/pause ]

The <audio> element works much like <video>. It holds one or more <source> elements and may contain fallback text for unsupported browsers.

Common Audio Attributes

Attribute	Description
controls	Displays play/pause interface
autoplay	Starts playing as soon as it's ready
loop	Replays audio after it ends
muted	Starts playback in muted mode
preload	Informs browser how to load the audio (none, metadata, auto)

Example: Autoplay and Loop

<audio autoplay loop muted>
  <source src="cherry-loop.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

This setup loops the sound and plays it as soon as the page loads — silently if muted is set.

Supported Formats

Different browsers support different audio formats. Here are the most common:

• MP3 — widely supported (audio/mpeg)
• OGG — open format, good support (audio/ogg)
• WAV — uncompressed, large size (audio/wav)

Multiple Formats Example

<audio controls>
  <source src="apple.mp3" type="audio/mpeg">
  <source src="apple.ogg" type="audio/ogg">
  Audio not supported in your browser.
</audio>

Fallback Content

Always include fallback text inside <audio> for older or unsupported browsers:

<audio controls>
  <source src="fruit.mp3" type="audio/mpeg">
  Your browser does not support this audio file. Try downloading it instead.
</audio>

Example: Full Audio Player

<h3>Listen to the Banana Song</h3>

<audio controls preload="auto">
  <source src="banana-theme.mp3" type="audio/mpeg">
  <source src="banana-theme.ogg" type="audio/ogg">
  Sorry, your browser doesn’t support this audio format.
</audio>

[ Audio player titled "Listen to the Banana Song" ]

Accessibility Tips

• Always use controls so users can manage playback
• Don’t use autoplay unless muted or critical
• Provide descriptive context or labels for screen reader users

Summary

The <audio> tag turns your HTML page into a multimedia experience. You've learned how to:

• Embed audio with fallback and multiple formats
• Control playback with HTML attributes
• Ensure accessibility and graceful degradation

What’s Next?

Next, let’s explore the <video> element — the natural visual companion to <audio>, perfect for tutorials, animations, and storytelling.