HTML5 Audio

There are different ways to play sounds on a Web Page.

Embedding Audio in HTML Document

Inserting sound onto a web page is not relatively easy, because browsers did not have a uniform standard for defining embedded media files.

In this chapter we'll demonstrates some of the many ways to embed sound in your webpage, from the use of a simple link to the use of the latest HTML5 <audio> element.

Using the HTML5 audio Element

The newly introduced HTML5 <audio> element provides a standard way to embed audio in web pages. However, the audio element is relatively new, but it works in most of the modern web browsers. The following example simply inserts an audio into the HTML5 document, using the browser default set of controls, with one source.

  • <audio controls="controls" src="birds.mp3">
  •     Your browser does not support the HTML5 Audio element.
  • </audio>

An audio, using the browser default set of controls, with alternative sources.

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

The 'ogg' track in the above example works in Firefox, Opera and Chrome, while the same track in the 'mp3' format is added to make the audio work in Internet Explorer and Safari.


Linking Audio Files

You can make links to your audio files and pay it by ticking on them.

  • <a href="sea.mp3">Track 1</a>
  • <a href="wind.mp3">Track 2</a>

Using the object Element

The <object> element is used to embed different kinds of media files into an HTML document. Initially, this element was used to insert ActiveX controls, but according to the specification, an object can be any media object such as video, audio, Java applets, ActiveX, document (HTML, PDF, Word, etc.), Flash animations or even images. Here's an example:

  • <object data="sea.mp3" width="200px" height="50px"></object>
  • <object data="sea.ogg" width="200px" height="50px"></object>
 

Warning:The <object> element is not supported widely and very much depends on the type of the object that's being embedded. Other methods like HTML5 <audio> element or Google MP3 player could be a better choice in many cases.


Using the embed Element

The <embed> element is used to embed multimedia content into an HTML document.

The following code fragment embeds audio files into a web page.

  • <embed src="wind.mp3" width="200px" height="50px">
  • <embed src="wind.ogg" width="200px" height="50px">
 

Warning:However the <embed> element is very well supported in current browsers and defined as standard in HTML5, but your audio might not played due to lack of browser support for that file format or unavailability of plugins.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.