Nearby lessons
13 of 24🎵 HTML <audio> Element
📌 What is HTML Audio?
The
<audio> element in HTML is used to embed sound content such as music, podcasts, or sound effects. It supports attributes like controls, autoplay, loop, and audio formats like MP3, WAV, and Ogg.🎧 Basic Usage
The
<audio> tag allows you to play audio files directly in the browser with built-in controls.Code Example
PREVIEW READY
▶️ Autoplay Behavior
Modern browsers usually require audio to be muted or user-initiated before autoplay is allowed.
Code Example
PREVIEW READY
🎼 Supported Audio Formats
| Attribute | Description |
|---|---|
MP3 | 🎯 Most widely supported audio format across browsers |
WAV | 🔊 High-quality audio with larger file size |
Ogg | 🌐 Open format with good compression |
⚙️ Common Attributes
| Attribute | Description |
|---|---|
controls | Shows audio controls like play, pause, and volume |
autoplay | Starts playing audio automatically (usually muted) |
loop | Repeats the audio when it ends |
muted | Starts the audio with no sound |
preload | Specifies how the audio should be loaded: auto, metadata, none |
🧪 Audio API (JavaScript)
- Methods:
play(),pause(),load() - Properties:
currentTime,volume,duration - Events:
play,pause,ended
✅ Best Practices
- ✅ Always include
controlsfor better usability - ✅ Provide multiple audio formats for browser compatibility
- ✅ Avoid autoplay unless necessary
- ✅ Keep file sizes optimized for faster loading
- ✅ Use meaningful fallback text for unsupported browsers
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!HTML Video