Embed Audio in HTML
Audio and Video
In this lesson, we will learn how to embed audio in an HTML document using the audio tag.
What is audio Tag in HTML
The <audio> tag is the most common and widely used way to embed audio in an HTML document. It is simple to use and supported by all modern browsers. The <audio> tag can be used to play audio files in various formats like MP3, WAV, and OGG.
Supported Audio Formats and its Media Types
The table below shows the audio formats and their media types supported in HTML.
|Audio Format||Media Type|
Attributes of the Audio Tag
- src: This attribute specifies the URL of the audio file.
- controls: This attribute adds the playback controls to the audio player.
- autoplay: This attribute automatically plays the audio file when the page loads.
- muted: This attribute mute the speakers when you play the audio.
- loop: This attribute sets the audio file to play continuously.
- preload: This attribute specifies whether the audio file should be loaded when the page loads.
How to Use <audio> Tag in HTML
Here is an example of how to use the <audio> tag to embed an audio file in an HTML document.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Audio Tag Example</title> </head> <body> <audio controls autoplay loop> <source src="audio-file.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>
In the above example, we used the audio tag with the attributes controls, autoplay and loop. In between opening and closing audio tags we used the source tag to embed our mp3 audio file using the src attribute and its media type using the type attribute.
If the browser does not support the audio tag, the text inside the audio tag will be displayed.
Click here to download the above mp3 audio file for practice purposes.
Note: The autoplay attribute will only work when the webpage is executed from a web server.
- jPlayer: A jQuery plugin that allows you to play and control audio and video files.