The HTML5 <audio> tag is used to embed audio in a web page. It's attributes works pretty similar to that of <video> tag. Not all browsers support all audio formats so, the audio file is encoded using special codecs.

Example to play mp3 file using HTML audio tag :

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Audio Tag </title>
</head>
<body>
<audio controls>
<source src="html-audio.ogg" type="audio/ogg">
<source src="html-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

Output

HTML Audio Tag

How it Works ?

The controls attribute in audio adds controls, like play, pause, and volume. The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. The text between the <audio> and </audio> tags will only be displayed in browsers if the <audio> element are not support.

HTML Audio Formats

Audio File Format	Media Type
.mp3	audio/mp3
.ogg	audio/ogg
.wav	audio/wav

Link Audio Files

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Linking Audio Files </title>
</head>
<body>
<p><a href="html-audio.mp3" width="200px" height="50px"> Audio 1 </a></p>
<p><a href="html-audio.ogg" width="200px" height="50px"> Audio 2 </a></p>
</body>
</html>

Output

Linking Audio Files

Audio 1

Audio 2

HTML5 Audio Attributes

Tags	Description
`controls`	It defines the audio controls with play/pause buttons.
`autoplay`	It specifies that the audio will start playing as soon as it is ready.
`loop`	It specifies that the audio file will start over again, every time when it is completed.
`muted`	It is used to mute the audio output.
`preload`	It specifies the author view to upload audio file when the page loads. It is ignored if `autoplay` is used.
`src`	It specifies the address of the audio file.

Browser Support

Element	Edge	Chrome	Firefox	Opera	Safari
`.mp3`	Yes	Yes	Yes	Yes	Yes
`.ogg`	Yes	Yes	Yes	Yes	No
`.WebM`	Yes	Yes	Yes	Yes	No

Recommended :

1 . How to create tables in HTML
2 . How to create Heading in HTML
3 . How do you create a marquee in HTML?
4 . HTML Description List

5 . how to embed YouTube video in HTML
6 . Add Style in HTML
7 . Photography Snippets using HTML and CSS
8 . BootStrap 4 Photography Snippets

Topics

BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors