Learn HTML – Part 28 – audio Tag – Embedding Audio
The HTML audio tag is used to embed audio content such as music, podcasts, or sound effects in a webpage.
This element was introduced in HTML5 and allows browsers to play audio files without requiring external plugins.
What is the audio Tag?
The audio tag defines sound content that can be played directly in the browser.
It supports common audio formats such as MP3, WAV, and OGG.
Basic Syntax
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute displays the built-in audio controls such as play, pause, and volume.
Example – Embedding an Audio File
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
Output:
Common audio Tag Attributes
| Attribute | Description |
|---|---|
controls | Displays audio playback controls |
autoplay | Automatically starts playing the audio |
loop | Repeats the audio continuously |
muted | Starts the audio in muted mode |
Supporting Multiple Audio Formats
Different browsers support different audio formats. It is recommended to provide multiple sources.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
Why Use the audio Tag?
- Allows embedding audio directly in webpages
- Works without external plugins
- Provides built-in playback controls
- Supports multiple audio formats
The
audiotag makes it easy to add sound or music to websites using modern HTML5 features.
Common Mistakes Beginners Make
- Forgetting to add the
controlsattribute - Using unsupported audio formats
- Using
autoplayexcessively which can annoy users
Conclusion
The HTML audio tag allows developers to embed audio files directly into web pages.
With built-in playback controls and support for multiple formats, it provides a simple way to add sound content to websites.
What’s Next?
Now that you understand the audio tag, the next step is learning about the video tag, which is used to embed videos in HTML webpages.
Next: Learn HTML – Part 29 – video Tag – Embedding Video →
Series: Learn HTML Series
