Skip to content

{Tutorial}HTML5 Audio.Step 30.

Featured Replies

HTML5 provides a standard for playing audio files.

Audio on the Web

 

Until now, there has not been a standard for playing audio files on a web page.

 

Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins.

 

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

Browser Support

 

 

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <audio> element.

 

Note: Internet Explorer 8 and earlier versions, do not support the <audio> element.

HTML5 Audio - How It Works

 

To play an audio file in HTML5, this is all you need:

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

 

The control attribute adds audio controls, like play, pause, and volume.

 

You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

 

The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

Audio Formats and Browser Support

 

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser 	MP3 	Wav 	Ogg
Internet Explorer 9 	YES 	NO 	NO
Firefox 4.0 	NO 	YES 	YES
Google Chrome 6 	YES 	YES 	YES
Apple Safari 5 	YES 	YES 	NO
Opera 10.6 	NO 	YES 	YES

 

HTML5 Audio Tags

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

 

Credits Olympus,Internet,ME.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.