HTML Audio Full Tutorial with Examples (All Attributes & Elements)
HTML TUTORIAL NO: 14
HTML Audio
The <audio> tag is an inline element used to embed sound files into a web page. It is useful when we want to add any sound contact on our websites and web pages. We have used the <audio> element with its src attributes or the <source> child element with its src and type attributes for each of them.
- HTML Audio is a special tag and elements it is important to upload to a audio in webpages.
- There are three supported file formats for the <audio> elements are MP3, Wav, Ogg.
Source Element <source>
We can specify a text inside the <audio> element that will be shown as a fallback in the browser that doesn’t support embedding audio.
HTML Audio Attributes
|
Attributes |
Functions |
| autoplay | It specific, the embedded audio will automatically begin play as soon as it can do. |
| loop | It specific, the embedded audio will play over and over again in an endless loop. |
| muted | This attribute is used to mute the music (audio) on browser. |
| src | It specific a file path that points to the audio file. |
| controls | It specific, the embedded audio will have controls provided by the browser. Controls element is a boolean attribute, it controls (play, pause, seeking, volume) |
| preload | It specifies if and how the audio file is loaded after the page is loaded on browser, It attribute have three value that are auto, metadata and none. |
Here the HTML Audio programming Examples, now you see all attributes programming examples one by one and its output.
Attribute autoplay (audio) Example in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>autoplay audio example</title> </head> <body> Â <audio controls autoplay src="new.mp3"></audio> </body> </html> |
Output of above examples autoplay audio
 |
Attribute controls audio Examples in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>autoplay audio example</title> </head> <body> Â <audio src="new.mp3" controls></audio> </body> </html> |
Output of above example controls audio
Source <source> Element in HTML
The source element is used to support audio format, some browser doesn’t support all audio format. That time using <source> element to support different types of audio format.
Here is an Example of <source> Element.
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>autoplay audio example</title> </head> <body> Â <audio controls> <source src="new.mp3" type="audio/mp3"> <source src="new.ogg"type="audio/ogg"> </audio> </body> </html> |
Output of above example
  |
Example of loop Attribute in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>loop audio example</title> </head> <body> Â <audio loop src="new.mp3" controls autoplay></audio> </body> </html> |
Output of above Example
Example of muted Attribute in HTML
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>mute audio example</title> </head> <body> Â <audio src="new.mp3" controls muted></audio> </body> </html> |
Output of above Example
 |
In this tutorial we learned all attributes and elements of audio tag <audio>, if you have any confusion, please comment on below comment box. In next tutorial we will be learn a new topic of HTML.
Also Learn This
- Description List programming example in HTML.
- HTML Table full tutorial.
- HTML Form full tutorial learn now.
- HTML image full tutorial.
- HTML Style and HTML color with example.
- HTML Button full tutorial with programming examples.
- HTML Audio full tutorial, all elements and attributes.
- HTML Audio Examples.
2 Comments
graliontorile · August 24, 2022 at 4:04 am
I’ve read some good stuff here. Certainly worth bookmarking for revisiting. I surprise how much effort you put to make such a magnificent informative website.
Kriscent Techno Hub · December 8, 2022 at 5:35 am
Informative blog, Thank you for sharing.