HTML audio tag

Html <audio> tag embeds the audio or sound in a web page. src attribute defines the address of the audio.

Example


<audio  src="files/sample.mp3" controls>  </audio>
 

Try </>

Specific uses

multiple alternative audios

Some browsers don't support all types of media. Multitype audio resources are used so that if one is not supported the other one will be used.

Example

<audio controls>
<source src="files/sample.mp3" type="audio/mp3" />
<source src="files/sample.ogg" type="audio/ogg" />
<p>Sorry, this media type can not be supported in this browser</p>
</audio>

Try</>

Source attribute is necessary to embed multiple audios. Here the difference is of type.

Here we have embedded two different types of audio.

Note: controls attribute must be used in the <audio> tag otherwise audio will not be played.

Related tags

Tags	Description
<source>	It provides the multiple alternative media resources.
<source>	`<source src="address of external resource/URL">`

Tag omission

Both starting and ending tags are necessary for the audio element.

Global Attributes

All the global attributes are applicable on the audio element.

Related Attributes

<audio> tag attributes
Attributes	Description
src	It specifies the location or address of the audio.
src	`<audio src="address of audio"> </audio>`
autoplay	This attribute plays the audio automatically after loading.
autoplay	`<audio src="address of audio" autoplay> </audio>`
loop	This attribute plays the audio automatically from start when it reaches at the end.
loop	`<audio src="URL" loop> </audio>`
muted	The audio is muted by default after the page is loaded.
muted	`<audio src="" muted > </audio>`
controls	This attribute gives the controls such as play/pause, volume control.
controls	`<audio src="location of audio" controls > </audio>`
crossorigin	It manages the crossorigin requests.
crossorigin
preload	represents how much buffering the audio needs before playback.
preload