HTML Audio

The HTML <audio> tag is used to embed audio in web pages.

Due to evolution of HTML5, it’s become possible to play an audio file on web page, before HTML5 we were using plug-ins like flash for playing audio file on web-page. Now we can use <audio> tag to play audio file in html.

In this HTML Audio Tutorial we will learn who to insert <audio> tag in html code and what are the attributes to control audio commands and other important things about HTML Audio.

Audio on the Web

• Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
• The HTML5 <audio> element specifies a standard way to embed audio in a web page.

audio tag syntax

<audio controls>
   <source src="audio url" type="audio/mpeg" />
</audio>

Browser Support

HTML Audio - Browser Support

HTML Audio - Media Types

In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg.

HTML Audio - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the audio element.

This allows you to load, play, and pause audios, as well as setting duration and volume.

There are also DOM events that can notify you when audio begins to play, is paused, etc.

HTML5 Audio Tags

Note: Type, src and controls attribute are important for playing an audio file in the web page using <audio> tag, so never forget these attribute to define in HTML Audio. Now let’s know all the important attributes and their importance.

Controls Attribute

Same as video tag, it is also important in HTML Audio, this attribute is responsible for viewing HTML Audio controls visibility in a web page.

<audio controls >
   <source src="../aud/jfkncf.pm3" type="audio/mpeg" />
</audio>

Src Attribute

This HTML Audio attribute is used to define audio file path in the web server. Proper file path and correct file extension is must for successfully playing audio in HTML web page.

Type Attribute

In HTML Audio, basically we use 3 types of audio format, based on audio format we can derive 3 types of value for type attribute in HTML Audio.

• For MP3 → audio/mpeg
• For Wav → audio/wav
• For Ogg → audio/ogg

Autoplay Attribute

If we want play an audio file automatically in web page when page complete its downloading from web server, then in such condition we use HTML Audio autoplay Attribute.

<audio controls autoplay >
   <source src="file/fhkfrk.mp3" type="audio/mpeg" />
</audio>

Loop Attribute

This attribute is used to automatic repetition of audio file playing in web page. We just have to define loop attribute in HTML Audio tag.

<audio loop controls >
   <source src="../f/djkhd.mp3" type="audio/mpeg" />
</audio>

Muted Attribute

If we want to predefined muted audio in our web page then in this condition we can use muted attribute of HTML Audio control.

<audio muted controls >
   <source src="../../f/bksf.mp3" type="audio/mpeg" />
</audio>

Preload Attribute

This attribute provide us control how we want to load audio file means audio file will be download automatically or after permission or it will not be download.

<audio preload="none" controls >
   <source src="audio_f/nbdds.mp3" type="audio/mpeg" />
</audio>