What is Audio tag basics in HTML?

HTMLmarkup~5 mins

Audio tag basics in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

The audio tag lets you add sound to your web page easily. It helps visitors listen to music, podcasts, or any audio without extra tools.

You want to play background music on a website.

You need to add a podcast episode for visitors to listen to.

You want to include sound effects for a game or interactive page.

You want to provide audio instructions or narration for accessibility.

You want visitors to control audio playback directly on the page.

Syntax

HTML

<audio src="path/to/audio.mp3" controls></audio>

The src attribute points to the audio file you want to play.

Adding controls shows play, pause, and volume buttons for users.

Examples

Plays the audio file with default controls visible.

HTML

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

Uses multiple sources for better browser support and shows a message if audio is not supported.

HTML

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

Plays audio automatically without sound (muted) when the page loads.

HTML

<audio src="sound.mp3" autoplay muted></audio>

Sample Program

This page shows a heading and an audio player with controls. The audio plays a horse sound from an online source. If the browser can't play audio, it shows a message.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Tag Example</title>
</head>
<body>
  <h1>Listen to this sound</h1>
  <audio controls>
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</body>
</html>

OutputSuccess

Important Notes

Always include the controls attribute so users can control playback.

Use multiple <source> tags with different audio formats for better browser support.

Remember to provide fallback text inside the audio tag for browsers that do not support it.

Summary

The <audio> tag adds sound to web pages easily.

Use controls to show playback buttons to users.

Multiple sources help your audio work on more browsers.