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

Element Chrome Edge Firefox Safari Opera Mobile
<audio> Yes Yes Yes Yes Yes Yes
version 4.0 9.0 3.5 4.0 10.5

HTML Audio - Browser Support

Browser MP3 Wav Ogg
Edge Yes No No
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Safari Yes Yes No
Opera Yes Yes Yes

HTML Audio - Media Types

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

File Format Media Type
MP3 audio/mpeg
Wav audio/wav
Ogg audio/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

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video> and <audio>

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.

Controls attribute

<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.

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.

Loop attribute

<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.

Muted attribute

<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.

Preload attribute

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

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved