Jump to content

{Tutorial}HTML5 Audio.Step 30.


MrHotFire

Recommended Posts

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...