HTML audio tag

By | February 29, 2020

In this chapter, we will learn about a new tag <audio> of HTML.HTML audio tag is used to translate sound like music and other audio clips.HTML5 is the three supported file formats for audio tags.

  • 1. mp3
  • 2. wav
  • 3. ogg

Tags like <audio> and <video> are used to run multimedia type items.

Which audio file format does the Web browser support? We can learn from this table.

Browser WAV MP3 OGG
Internet Explorer NO YES NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

Browser Support:-

All modern browsers support this tag of HTML5.

MIME Types for audio Formats:-

Format MIME-type
MP3 audio/mpeg
WAV audio/wav
OGG audio/ogg

Example:-

<audio controls>
	<source src="audio1.mp3" type="audio/mpeg">
	<source src="audio2.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

Attributes HTML audio tag:-

Attribute Value Description
controls controls Specifies that audio controls should be displayed (such as a play/pause button etc)
autoplay autoplay Specifies that the audio will start playing as soon as it is ready
loop loop Specifies that the audio will start over again, every time it is finished
preload auto metadata
none
Specifies if and how the author thinks the audio should be loaded when the page loads
muted muted Specifies that the audio output should be muted
src URL Specifies the URL of the audio file

Example HTML audio tag with attributes:-


<audio controls autoplay>
	<source src="audio1.mp3" type="audio/mpeg">
	<source src="audio2.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

<audio controls loop>
	<source src="audio1.mp3" type="audio/mpeg">
	<source src="audio2.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

<audio controls muted>
	<source src="audio1.mp3" type="audio/mpeg">
	<source src="audio2.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

<audio controls preload="none">
	<source src="audio1.mp3" type="audio/mpeg">
	<source src="audio2.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

<audio src="audio.ogg" controls>
	Your browser does not support the audio tag.
</audio>

Creact Websitehighspeedre.com
jobsresults
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *