HTML <audio> Tag – Playing Sound
📌 Introduction
The <audio> tag is used to embed sound files in a webpage.
It allows users to:
- Play audio
- Listen to podcasts
- Hear voice recordings
- Control playback (play, pause, volume)
🧱 Basic Syntax
<audio src="audio.mp3" controls></audio>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h1>My Audio Player</h1>
<audio src="Audio.mp3" controls></audio>
</body>
</html>
🖥️ Output Explanation
- An audio player appears in the browser
- Users can play, pause, and adjust volume
- No audio plays automatically unless specified
🎯 Important Attributes
1. controls
<audio src="Audio.mp3" controls></audio>
✔ Adds play/pause buttons and volume control
2. autoplay
<audio src="Audio.mp3" autoplay></audio>
⚠️ Starts playing automatically (often blocked unless muted)
3. muted
<audio src="Audio.mp3" autoplay muted></audio>
✔ Required for autoplay in most browsers
4. loop
<audio src="Audio.mp3" controls loop></audio>
✔ Repeats audio continuously
💡 Better Practice: Multiple Formats
Different browsers support different audio formats:
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
✔ Improves compatibility
🎯 When to Use <audio>
Use it for:
- Audio players
- Podcasts
- Voice notes
- Background sounds
⚠️ Important Notes
- Always include
controlsfor usability - Compress audio files for performance
- Avoid autoplay with sound (user experience issue)
🚫 Common Mistakes
- Missing
controls❌ - Using only one format ❌
- Autoplay with sound ❌
- Large unoptimized audio files ❌
🎨 Styling Example
<audio controls style="width:300px;">
<source src="Audio.mp3" type="audio/mpeg" />
</audio>
🧪 Mini Exercise
Create a page with:
A Audio file with controls
An audio that:
- Loops
- Is muted
A second format using
<source>