ProgramGuru

HTML audio Tag

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

AttributeDescription
controlsDisplays play/pause interface
autoplayStarts playing as soon as it's ready
loopReplays audio after it ends
mutedStarts playback in muted mode
preloadInforms 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

Check your understanding 1

What attribute of the <audio> tag allows users to control playback (play, pause, volume)?
Choose one answer. You can try again.

Answer and explanation

controls

The controls attribute adds the browser’s native audio controls to let users play, pause, and adjust the volume.

Check your understanding 2

The autoplay attribute in the <audio> tag makes the audio start playing immediately when the page loads.
Choose one answer. You can try again.

Answer and explanation

True

When autoplay is set, the audio automatically starts playing once the webpage is loaded, without user interaction.

Check your understanding 3

Choose the option that lists all and only the correct statements.

  1. MP3
  2. OGG
  3. WAV
  4. AVI
Which of the following are valid audio file formats supported by most browsers for the <audio> tag?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

Common audio formats supported include MP3, OGG, and WAV. AVI is a video format, not suitable for the <audio> tag.

Check your understanding 4

What does the loop attribute do when added to an <audio> element?
Choose one answer. You can try again.

Answer and explanation

Repeats the audio indefinitely

The loop attribute causes the audio to restart automatically after it ends, creating an endless loop.

Check your understanding 5

It is good practice to include fallback text inside the <audio> tag for browsers that do not support the audio element.
Choose one answer. You can try again.

Answer and explanation

True

Including fallback text like 'Your browser does not support the audio element' helps users know why audio isn’t playing if their browser is outdated.

Check your understanding 6

Choose the option that lists all and only the correct statements.

  1. muted
  2. preload
  3. src
  4. href
Which of the following attributes can be used with the <audio> tag to enhance user experience?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

The muted attribute silences audio initially, preload suggests loading behavior, and src specifies the audio file. href is not valid on <audio>.

What’s Next?

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

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: HTML video Tag →