HTML5 Audio

Site Admin Joined: Jun 30, 2012 Posts: 213 Location: NL

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:

Code:

<!DOCTYPE html>


<html>


<body>





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





</body>


</html>

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.

Site Admin Joined: Jun 30, 2012 Posts: 213 Location: NL

If you would like to play your music automatically then use this one:

Code:

<!DOCTYPE html>


<html>


<body>





<audio loop="loop" autoplay="autoplay" controls="controls">


  <source src="bumbum.ogg" type="audio/ogg">


  <source src="bumbum.mp3" type="audio/mpeg">


Your browser does not support the audio element.


</audio>





</body>


</html>

If you wanna play the music by yourself then use this one:

Code:

<!DOCTYPE html>


<html>


<body>





<audio loop="loop" controls="controls">


  <source src="bumbum.ogg" type="audio/ogg">


  <source src="bumbum.mp3" type="audio/mpeg">


Your browser does not support the audio element.


</audio>





</body>


</html>

That's all folks!

	bestbuildpc Forum Index -> Web Development	All times are GMT + 2 Hours
Page 1 of 1