Introduction
The HTML <audio> element is used to embed sound content in web pages. It provides a way to include audio players with support for various formats and controls. The <audio> element allows for easy integration of audio playback in HTML documents.
Basic Audio Element
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Audio Example</title>
</head>
<body>
<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>
</body>
</html>
Attributes of the <audio> Element
src
Specifies the URL of the audio file. Typically used inside the <source> element.
controls
Adds audio controls, such as play, pause, and volume.
autoplay
Specifies that the audio will start playing as soon as it is ready.
loop
Specifies that the audio will start over again, every time it is finished.
muted
Specifies that the audio output of the audio should be muted.
Example with All Attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio with Attributes</title>
</head>
<body>
<audio controls autoplay loop muted>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Multiple Audio Sources
To ensure compatibility with different browsers, you can provide multiple sources for the same audio. The browser will use the first recognized format.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Audio Sources</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</body>
</html>
Captions and Subtitles
You can add captions and subtitles to your audio using the <track> element, although this is more common with video content.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio with Captions</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
Your browser does not support the audio element.
</audio>
</body>
</html>
Example: WebVTT File (captions.vtt)
WEBVTT
00:00:00.000 --> 00:00:05.000
Welcome to our audio.
00:00:05.000 --> 00:00:10.000
In this part, we will show you the basics of HTML audio.
Customizing Audio Controls with JavaScript
You can customize audio controls using JavaScript to create a more interactive experience.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Audio Controls</title>
<style>
#custom-controls {
display: flex;
justify-content: center;
margin-top: 10px;
}
#custom-controls button {
margin: 0 5px;
padding: 10px;
}
</style>
</head>
<body>
<audio id="myAudio" controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="custom-controls">
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="stopAudio()">Stop</button>
</div>
<script>
var audio = document.getElementById('myAudio');
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
function stopAudio() {
audio.pause();
audio.currentTime = 0;
}
</script>
</body>
</html>
Example: Combining Different Audio Elements
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combined Audio Example</title>
</head>
<body>
<audio controls autoplay loop muted>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/wav">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
Your browser does not support the audio element.
</audio>
</body>
</html>
Conclusion
The HTML <audio> element is used for embedding sound content on web pages. It supports various attributes for customization, multiple audio sources for compatibility, captions, and can be enhanced with JavaScript for custom controls. Understanding and utilizing the <audio> element allows for a rich multimedia experience on web pages.