How to Add Audio in HTML

Use the <audio> element when you want visitors to play sound directly on your page. This works well for podcasts, lesson narration, product sounds, music previews, and interview clips.

What you’ll build or solve

You’ll learn how to add audio in HTML using the <audio> tag and a <source> file. You’ll also know how to show playback controls so users can play, pause, and adjust volume.

When this approach works best

This approach is the right choice when the audio file is part of the page experience and users should not need to leave the site.

Common real-world scenarios include:

• Podcast episodes
• Language lesson pronunciation clips
• Guided meditation audio
• Product sound demos
• Interview snippets

This is a bad idea when you only want to link to an external audio platform. In that case, a normal <a> link may be enough.

Prerequisites

You only need:

• A basic HTML file
• An audio file, such as .mp3
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the <audio> tag with a <source> file

Use the <audio> element and place a <source> tag inside it.

<audio controls>
  <source src="lesson-audio.mp3" type="audio/mpeg">
</audio>

To add fallback text for unsupported browsers, place it inside the <audio> tag below the source.

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

What to look for:

• controls shows play, pause, timeline, and volume controls
• <source> points to the audio file
• type="audio/mpeg" is common for .mp3
• Add fallback text for unsupported browsers
• Keep the file path accurate, especially if the file is inside another folder

Examples you can copy

Podcast clip

<audio controls>
  <source src="podcast-preview.mp3" type="audio/mpeg">
</audio>

Pronunciation lesson

<audio controls>
  <source src="english-pronunciation.mp3" type="audio/mpeg">
</audio>

Product sound demo

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

Common mistakes and how to fix them

Mistake 1: Forgetting the controls attribute

What the reader might do:

<audio>
  <source src="lesson-audio.mp3" type="audio/mpeg">
</audio>

Why it breaks: the audio may load, but users do not get visible playback controls.

Corrected approach:

<audio controls>
  <source src="lesson-audio.mp3" type="audio/mpeg">
</audio>

Mistake 2: Using the wrong file path

What the reader might do:

<audio controls>
  <source src="audio/demo.mp3" type="audio/mpeg">
</audio>

Why it breaks: if the file is not in that folder, the browser cannot load it.

Corrected approach:

<audio controls>
  <source src="demo.mp3" type="audio/mpeg">
</audio>

Use the real file location relative to your HTML file.

Mistake 3: Leaving out the file type

What the reader might do:

<audio controls>
  <source src="lesson-audio.mp3">
</audio>

Why it breaks: some browsers rely on the type value to recognize the audio format more reliably.

Corrected approach:

<audio controls>
  <source src="lesson-audio.mp3" type="audio/mpeg">
</audio>

Troubleshooting

If the audio does not appear, check the src file path.

If the audio appears but does not play, confirm the file format is supported, such as .mp3.

If users cannot control playback, add the controls attribute.

If the wrong file plays, verify the source file name and folder location.

Quick recap

• Use <audio> to add sound to the page
• Add a <source> tag inside it
• Use controls for playback controls
• Set the correct file path and file type
• Add fallback text for unsupported browsers