Introduction
In modern websites, the use of audio and video elements has become increasingly common. To stay relevant in the web development world, it is essential to understand how to incorporate these elements using HTML tags. This article aims to guide readers on adding audio and video to an HTML5 document, providing them with the necessary knowledge to enhance their web development skills.
<audio> tag in HTML5
In HTML, the <audio> tag is used to add audio to our web pages. The audio tag was to HTML way back in the 2010 and 2011 time frame, but before the introduction of the <audio> tag, web plugins like Flash were required to play audio on our web pages. The <audio> tag is an inline element.
Syntax
<audio>
<source src="url" type="audio/audioformat">
</audio>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<audio>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
In your example, we have included a source element within the audio element, which specifies the location of the audio file ("demo.mp3") and its type ("audio/mpeg"). This is important for the browser to be able to play the audio correctly.
HTML audio formats and their media types
Following are the formats supported by the <audio> tag and their media types.
| Audio Format | Media Type |
| wav | audio/wav |
| mp3 | audio/mpeg |
| ogg | audio/ogg |
The above are the supported formats of audio tags.
Attributes of <audio> tag in HTML
In <audio> tag, we can use some attributes according to our requirements and use. Following are the attributes of <audio> tag -
- controls - It manages what controls to display on the webpage, like play or pause.
- autoplay - It automatically plays the audio embedded in the web page.
- src - It is used to specify the URL of the audio file.
- loop - It is used to play the audio continuously in a loop.
- muted - It is used to mute the audio file.
Controls in <audio> tag in HTML
The control attribute is used to specify what controls to display in the audio in the browser. In other words, the "controls" attribute in HTML instructs the user agent (browser) to display a default user interface that allows users to control the playback of audio. This interface typically includes options such as play, pause, volume control, and timeline scrubbing, making it easier for users to interact with the audio content on a webpage.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an audio tag example</p>
<audio controls>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
In the above example, we used an audio tag with its attributes.
Output
Autoplay in <audio> tag in HTML
It automatically plays the audio embedded in the web page. In other words, the "autoplay" attribute in HTML instructs the user agent (web browser) to automatically start playing the audio as soon as it is able to, without any interruption. This attribute eliminates the need for manual interaction from the user to initiate playback, enhancing the convenience and immediacy of audio content on web pages.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an example of autoplay</p>
<audio controls autoplay>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Output
!n the above example, we have included an audio element with the controls and autoplay attributes set. The controls attribute will display the default playback controls for the audio, such as play, pause, and volume controls. The autoplay attribute will start playing the audio automatically when the webpage is loaded.
We have also added a paragraph element to provide some context for the audio element, which is a good practice for accessibility and user experience.
However, it's important to note that auto-playing audio can be disruptive for users, especially those who may be using screen readers or have limited internet bandwidth. It's always a good idea to provide users with control over whether or not they want to play audio by including a play button or some other kind of user interface element that allows them to activate the audio on their own.
Src in <audio> tag in HTML
It is used to specify the URL of the audio file.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an audio tag example</p>
<audio controls>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
In the above example, we have included an audio element with the controls attribute set. The controls attribute will display the default playback controls for the audio, such as play, pause, and volume controls. We have also added a paragraph element to provide some context for the audio element, which is a good practice for accessibility and user experience.
It's worth noting that in this example, the audio will not start playing automatically when the webpage is loaded. This can be a good thing, as auto-playing audio can be disruptive for users.
Loop in <audio> tag in HTML
It is used to play the audio continuously in a loop. In other words, this instruction tells the user agent (web browser) to automatically seek back to the beginning of the audio when it reaches the end. It enables the audio to play continuously in a loop without requiring manual intervention to replay it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an example of loop attribute</p>
<audio controls loop>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Muted in <audio> tag in HTML
It is used to mute the audio file on the web page. In other words, the "muted" attribute in HTML is used to indicate whether the audio channel should be muted by default. It can override the user's preferences, ensuring that the audio plays without sound unless the user explicitly unmutes it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is example of muted attribute in audio tag</p>
<audio controls muted>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Supported Browsers for <audio> tag
Following are the supported browsers for the audio tag.
Join the conversation! Your thoughts help the community grow.