What is <audio> tag ?
<audio> tag in HTML is an inline element used to embed sound files inside the web page.
<audio> tag is used to add audio files such as songs etc in the website.
What are the supported formats for <audio> tag ?
Only certain formats are supported by HTML5 <audio> tag, listed below
1. mp3
2. ogg
3. wav
What are the ways of adding audio files in webpages ?
There are two ways of adding audio files in webpages
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
1. Using <audio> tag.
“controls” attribute controls such as play, pause, and volume.
“source” element specifies the audio files which the browser can play.
The browser plays the file only supported format described below.
Example :
<!DOCTYPE html>
<html>
<body>
<p>Audio Songs</p>
<audio controls>
<source src="song1.mp3" type="audio/mp3">
</audio>
</body>
</html>
Output :
2. Using <embed> tag.
<embed> tag is an old technique.
<embed> tag is less efficient then <audio> tag.
<embed> tag requires a plugin like MIDI,QuickTime for playing the audio.
Example :
<!DOCTYPE html>
<html>
<body>
<p>Audio Songs</p>
<embed src="song1.mp3" width="200" height="50" autoplay="false" loop="false">
</body>
</html>
Output :
What are the attributes of <audio> tag ?
Some of the attributes can be used with <audio> tag listed below,
1. src
2. controls
3. autoplay
4. loop
5. muted
1. src :
src is the source location of the audio file.
Example :
<!DOCTYPE html>
<html>
<body>
<p>Audio Songs</p>
<audio src="song1.ogg" controls>
</audio>
</body>
</html>
Output :
2. Controls :
Controls the behaviour of the audio player such as play, pause, volume control etc.
Example :
<!DOCTYPE html>
<html>
<body>
<p>Audio Songs</p>
<audio controls>
<source src="song1.mp3" type="audio/mp3">
</audio>
</body>
</html>
Output :
3. Autoplay :
Autoplay enables the audio file to play immediately after the webpage is loaded/refreshed.
Example :
<!DOCTYPE html>
<html>
<body>
<p>Audio Songs</p>
<audio controls autoplay>
<source src="song1.mp3" type="audio/mp3">
<source src="song2.ogg" type="audio/ogg">
</audio>
</body>
</html>
Output :
4. Loop :
Loop decides the audio file should be played continuously in repeated manner.
Example :
<!DOCTYPE html>
<html>
<body>
<p>Audio Songs</p>
<audio controls loop>
<source src="song1.ogg" type="audio/ogg">
<source src="song2.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Output :
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
5. Muted :
Muted makes the audio file mute while playing.
Example :
<!DOCTYPE html>
<html>
<body>
<p>Audio Songs</p>
<audio controls muted>
<source src="song1.mp3" type="audio/mp3">
<source src="song2.ogg" type="audio/ogg">
</audio>
</body>
</html>
Output :
