What is the difference between src on audio and source elements?

Use src on the audio element for a single file. Use nested source elements when offering multiple formats — the browser tries each source until one is playable.

HTML <audio> Tag

Q: What is the HTML audio tag used for?

The HTML audio element embeds sound content directly in a web page. Browsers render a native audio player when the controls attribute is present, without requiring plugins.

Q: What audio formats does the audio tag support?

Common formats include MP3 (audio/mpeg), Ogg Vorbis (audio/ogg), WAV (audio/wav), and AAC (audio/mp4). Provide multiple source elements so browsers can pick a supported format.

Q: Why does autoplay not work on my audio element?

Most modern browsers block autoplay with sound until the user interacts with the page. Use muted autoplay for background audio, or let users press play via the controls attribute.

Q: Does the audio tag work in all browsers?

Yes. The audio element is supported in all modern browsers. Internet Explorer 9+ has partial support. Always include fallback text inside the audio element for very old browsers.

Beginner

⏱️ 7 min read

📚 Updated: Jun 2026

🎯 4 Examples

HTML5 Media

HTML audio tag tutorial — embed sound in web pages

Overview

What You’ll Learn

By the end of this tutorial, you’ll confidently embed sound in web pages with native HTML5 audio controls.

Basic Playback

Embed audio with src and controls for a native player.

Key Attributes

Use autoplay, loop, muted, and preload.

Multiple Formats

Offer MP3, Ogg, and AAC fallbacks with <source>.

Autoplay Policies

Respect browser rules for background and muted autoplay.

Captions

Add WebVTT tracks with <track> for accessibility.

Browser Support

Ship audio with fallbacks for every major browser.

Fundamentals

What Is the `<audio>` Tag?

The audio element (<audio>) is an HTML5 embedded content tag for playing sound files. It replaced older plugin-based approaches and works with native browser controls.

💡

Native browser player

Add the controls boolean attribute and the browser renders play, pause, timeline, and volume UI—no Flash or third-party plugins required.

Common uses include podcasts, narration, music clips, sound effects, and language lessons. The element can contain <source> and <track> children.

Foundation

📝 Syntax

Point the src attribute at an audio file and add controls so users can play and pause:

audio.html

<audio src="/audio/count.mp3" controls></audio>

The controls boolean attribute adds the browser’s default playback UI.
Use nested <source> elements instead of src for multiple formats.
Include fallback text inside <audio> for unsupported browsers.

Cheat Sheet

⚡ Quick Reference

Attribute	Values	Purpose
`src`	URL	Single audio file path or URL
`controls`	Boolean	Shows native play/pause/volume UI
`autoplay`	Boolean	Start playback on load (often blocked unless muted)
`loop`	Boolean	Restart audio when it reaches the end
`muted`	Boolean	Silence audio by default; helps autoplay policies
`preload`	`none` \| `metadata` \| `auto`	Hints how much audio to buffer before play

Reference

🧰 Attributes

The <audio> tag supports these key attributes plus global attributes like class and id:

src Required*

URL of the audio file. Use <source> instead when offering multiple formats.

src="/audio/count.mp3"

controls UI

Displays the browser’s built-in player controls (play, pause, timeline, volume).

<audio controls>

autoplay / muted Playback

Start automatically on load. Browsers often block unmuted autoplay—pair with muted.

autoplay muted

loop / preload Optional

loop replays continuously. preload hints buffering: none, metadata, or auto.

loop preload="auto"

attributes.html

<audio src="/audio/count.mp3" controls loop preload="auto"></audio>

* Either src on <audio> or at least one nested <source> element is required.

Compatibility

🎶 Supported Audio Formats

Provide multiple formats using nested <source> elements so every browser finds a playable file:

Format	MIME Type	Notes
MP3	`audio/mpeg`	Widest support across browsers
Ogg Vorbis	`audio/ogg`	Open format; Firefox-friendly fallback
WAV	`audio/wav`	Uncompressed; large file sizes
AAC	`audio/mp4`	Common on Safari and mobile devices

formats.html

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

Hands-On

Examples Gallery

Four audio patterns with copy-ready code, live previews, and hands-on practice.

👀 Live Preview

A native audio player rendered by the browser:

Basic Audio Player

The simplest form: one file and visible controls.

basic-audio.html

<audio src="/audio/count.mp3" controls></audio>

Try It Yourself

Controls, Loop & Preload

Combine controls, loop, and preload="auto" for a player that buffers early and repeats when finished.

loop-preload.html

<audio src="/audio/count.mp3" controls loop preload="auto"></audio>

Try It Yourself

📚 Common Use Cases

Here are the most frequent ways developers use the <audio> tag.

Multiple Source Formats

List MP3 and Ogg sources so the browser picks the first format it supports. Include fallback text for browsers without HTML5 audio.

multiple-formats.html

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

Try It Yourself

Autoplay & Background Audio

Use autoplay and loop for ambient background sound. Add muted because browsers block unmuted autoplay, and always let users pause or mute.

background-music.html

<audio src="/audio/count.mp3" autoplay loop muted></audio>

Try It Yourself

A11y

♿ Accessibility

Make audio usable for everyone:

controls — always provide a way to play, pause, and adjust volume
Fallback text — place readable text inside <audio> for unsupported browsers
<track> — add captions or subtitles with WebVTT files for spoken content
Autoplay — avoid surprising users; respect reduced-motion and focus preferences
Transcripts — offer a text alternative alongside long-form audio

captions.html

<audio controls src="/audio/count.mp3">
  <track kind="captions" src="/audio/count.vtt" srclang="en" label="English">
  Your browser does not support the audio element.
</audio>

🧠 How <audio> Works

Author adds audio markup

Set src or nest <source> elements inside <audio>.

Markup

Browser picks a playable format

The browser tests each source until it finds a supported codec, or uses src directly.

Compatibility

Native controls render

With controls, the browser draws play, pause, timeline, and volume without custom JavaScript.

Sound plays in the page

Users listen without leaving the page or installing plugins. Optional <track> adds captions.

Compatibility

Universal Browser Support

The <audio> element is supported in all modern browsers. Internet Explorer 9+ has partial support with some format limitations.

✓ Baseline · Since HTML5

Native audio everywhere users listen

From IE 9 to the latest mobile browsers — embed sound without plugins. Offer multiple formats for legacy partial support.

98% Modern browser support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 9+ · Limited codec support

Partial support

Opera All modern versions

Full support

<audio> tag 98% supported

Bottom line: Ship HTML5 audio with confidence. Provide MP3 plus Ogg or AAC fallbacks and fallback text for the widest reach.

Wrap Up

Conclusion

The <audio> tag makes it straightforward to embed sound in web pages with native browser controls. Use controls for user-initiated playback, provide multiple <source> formats for compatibility, and respect autoplay policies.

Pair audio with <track> captions and text transcripts for accessible, engaging multimedia.

View Examples Gallery Explore Related Topics

Pro Tips

💡 Best Practices

✅ Do

Add controls so users control playback
Offer multiple <source> formats (MP3 + Ogg or AAC)
Include fallback text inside <audio>
Compress audio files for faster page loads
Use <track> for captions on spoken content

❌ Don’t

Autoplay loud audio without user consent
Rely on a single obscure audio format
Hide controls when users need to pause or mute
Use huge uncompressed WAV files for web delivery
Forget transcripts for long narration or podcasts

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<audio>`

Bookmark these before you ship — they’ll make every player accessible and cross-browser ready.

Core concepts

🎧 01

Native Playback

<audio> embeds sound with built-in browser controls—no plugins required.

Foundation

▶️ 02

Controls UI

The controls attribute shows play, pause, timeline, and volume UI.

Reference

💾 03

Format Fallbacks

Use multiple <source> elements so every browser finds a playable codec.

Compatibility

🔊 04

Autoplay Rules

Autoplay usually requires muted or prior user interaction.

Policy

♿ 05

Captions

<track> adds WebVTT captions for spoken content accessibility.

A11y

🌐 06

Universal Support

Supported in all modern browsers; IE 9+ has partial codec support.

Compatibility

❓ Frequently Asked Questions

What is the HTML audio tag used for?

The <audio> element embeds sound content in a web page. With controls, browsers render a built-in player—no plugins needed.

What audio formats does the audio tag support?

MP3 (audio/mpeg), Ogg (audio/ogg), WAV (audio/wav), and AAC (audio/mp4) are common. Provide several via <source> for broad compatibility.

Why does autoplay not work on my audio element?

Browsers block autoplay with sound to protect users. Use muted for background audio, or let users press play via controls.

What is the difference between src and source elements?

src on <audio> works for one file. Nested <source> elements let you list multiple formats; the browser uses the first one it can play.

Does the audio tag work in all browsers?

Yes in all modern browsers. IE 9+ has partial support. Always include fallback text inside the element.

Build an Audio Player

Open the Try It editor and experiment with controls, loop, and multiple source formats.

Try Audio Player →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

HTML aside Tag HTML b Tag

HTML <audio> Tag

What You’ll Learn

Basic Playback

Key Attributes

Multiple Formats

Autoplay Policies

Captions

Browser Support

What Is the <audio> Tag?

📝 Syntax

⚡ Quick Reference

🧰 Attributes

🎶 Supported Audio Formats

Examples Gallery

👀 Live Preview

Basic Audio Player

Controls, Loop & Preload

📚 Common Use Cases

Multiple Source Formats

Autoplay & Background Audio

♿ Accessibility

🧠 How <audio> Works

Author adds audio markup

Browser picks a playable format

Native controls render

Sound plays in the page

Universal Browser Support

Native audio everywhere users listen

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <audio>

Native Playback

Controls UI

Format Fallbacks

Autoplay Rules

Captions

Universal Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <aside> Tag

HTML <article> Tag

HTML <a> Anchor Tag

Try Multiple Formats

Build an Audio Player

About the author

What Is the `<audio>` Tag?

Six truths every developer should know about `<audio>`