The Audio tag defines a sound, and it is used to embed audio content such as music or other streams in an HTML document. It is one of the new sectioning elements in HTML 5.
The tag uses the “src” attribute or
In Simple words, the tag helps to add and play audio files on your site. Since not all browsers support all audio formats, the audio file is encoded using special codecs.
Estimated reading time: 3 minutes
Syntax:
The tag always comes in pairs. It contains both an opening tag and closing tag.
<audio src=sound.mp3> filename </audio>
Sample of the HTML Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://sharepointanchor.com/wp-content/uploads/2021/02/SPA.mp3"><!-- It is a mp3 format audio file-->
<source src="https://sharepointanchor.com/wp-content/uploads/2021/02/SPA.ogg"><!-- It is a ogg format audio file-->
</audio>
<p>Click the play button</p>
</body>
</html>
Result:
Attributes:
The tag has attributes, that indicate the path to the audio file. This tag mostly use the following attributes such as:
- Controls Attribute
- Autoplay Attribute
- Loop Attribute
- Muted Attribute
Control Attribute:
Instead of playing sounds automatically, you can use the “control” attribute in the tag. This attribute lets the browser display controls such as Volume and Play/Pause options.
<audio src="sound.mp3" controls> </audio>
Autoplay Attribute:
The “autoplay” attribute is used to play audio files automatically.
<audio src="sound.mp3" autoplay> </audio>
Loop Attribute:
If you want an audio file to play over and over again, you can add the “loop” attribute to your audio element.
<audio src="sound.mp3" autoplay loop> </audio>
Muted Attribute:
This attribute specifies whether the audio will be initially silenced.
<audio src="sound.mp3" muted="true"> </audio>
Multiple File Formats:
This tag can be used to play sound files in the following formats:
- .mp3 – This file format supports by all modern browsers.
- .wav – This format will not support by Internet Explorer.
- .ogg – It will not support by Internet Explorer and Safari.
With the tag you can define multiple formats of the same audio file. This is especially useful if you wish to play a file in .ogg format, which is not supported by both Internet Explorer and Safari.
<audio controls>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>
List of Attributes for Tag:
The <audio> tag supports the global attributes and the event attributes. You can use the following properties to style an HTML audio tag.
th, td{ padding: 20px; }
| Attribute | Value | Definition |
|---|---|---|
| autoplay | This attribute helps to play the audio file automatically after loading the page. | |
| controls | It displays the control options such as (play/pause button, volume control). If the controls attribute is missing, the audio file will not be displayed on the page. | |
| loop | Helps to repeat continuously the audio file from the beginning after its completion. | |
| muted | This attribute lets the browser to mutes the sound when the audio file is played. | |
| preload | The preload attribute defines what the browser should do if the attribute controls are not specified. | |
| auto | Playback starts after the page is loaded. | |
| metadata | It will tell the browser to upload a small portion of the file to determine its main characteristics: (for example, file size). | |
| none | Playback starts only after clicking the corresponding button. | |
| src | URL | This attribute specifies the path to the audio file. |
Browser Support:
Related Articles:
The post HTML Audio Tag appeared first on Share Point Anchor.
Top comments (0)