Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html

What is the <audio> tag in HTML?

Hammad Nasir

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The <audio> tag in HTML

The <audio> tag is used to embed audio files in an HTML page. The structure of the <audio> tag is as follows:

<audio>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
Audio tag is not supported in the browser
</audio>

The <audio> tag itself can reference audio files. However, the <source> tag(s) inside the <audio> tag can also provide the audio files that must be embedded in the HTML page. The <source> tag requires src and type attributes. The src attribute must provide the URL to the audio file, and the type attribute must provide the type of audio file. The text enclosed between <audio> and </audio> is only displayed if the browser does not support the <audio> tag.

Example usage of the <audio> tag

The following code provides an example:

In the example above, the first <audio> tag contains no <source> tag and has a URL specified in the src attribute. In the second <audio> tag, 2 <source> tags are embedded, but only the audio of the <source> tag that comes first is played. In order to play the next audio specified by the second <source> tag, some Javascript code is required.

Note: The controls attribute displays the audio controllers in the above example; if it is not present, the audio can only be played by writing Javascript code.

Attributes

Attribute Value Description
autoplay autoplay A boolean attribute which, if present, starts playing the audio file when it is ready
controls controls A boolean attribute which, if present, displays the audio controller
loop loop A boolean attribute which, if present, restarts the audio whenever it ends
muted muted A boolean attribute which, if present, mutes the audio output
preload auto
metadata
none
Instructs the browser when to load the audio file
src URL The URL of the audio resource

Browser Support and Audio Format

Browser MP3 WAV OGG
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Safari Yes Yes No
Edge Yes Yes Yes
Opera Yes Yes Yes

Note: Support for WAV and OGG format in Edge browser is after version 79.

GOT_Music.mp3
Fire_Alarm.mp3
Scifi_Alarm.wav

RELATED TAGS

html

CONTRIBUTOR

Hammad Nasir
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring