Embedding audio in HTML

Inserting music onto a web page is relatively easy. In the past, multiple tags had to be used because browsers did not have a uniform standard for defining the media files. Now you can include the media files using embed or object tag.

USING PLUGIN

A Plugin is a small computer program that extends the standard functionality of a web browser. Plugins can be used for many purposes. They can be used to display music, display maps, verify your bank id, control your input, and much more.

Plugins can be added to HTML pages using <object> or <embed> tags.

<embed> Tag

<embed> tag is to embed music files on your web page

EXAMPLE:


<embed height="100px" width="150px" src="hearmusic.mp3" />
<p> To stop the music press stop/pause.</p>

NOTE:

  • The <embed> tag is unknown to HTML 4. Your page will not validate correctly
  • If your browser does not support the file format, your audio will not play
  • If you convert your file to another format, it will still not play in all browsers

<object> Tag

<object> tag is to embed music files on your web page

EXAMPLE:


<object height="100px" width="150px" src="hearmusic.mp3" />
<p> To stop the music press stop/pause.</p>

<audio> Tag

<audio> tag is to include the music files on your web page

EXAMPLE:


<audio controls="controls" height="50px" width="100px">
<source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
</audio>

NOTE:

  • The use of ogg file is to make it work in Firefox, Opera and Chrome
  • To make the audio to work in Internet Explorer and Safari, a file of the type MP3 is added

Using Yahoo Media Player

Using the Yahoo player is very simple just insert the JavaScript at the bottom of your web page

EXAMPLE:


<a href="hearmusic.mp3">Play The Song</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Using GOOGLE


<a href="song.mp3">Play Song</a>

<embed type="application/x-shockwave-flash" wmode="transparent"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=song.mp3" height="27" width="320">
</embed>

Using HYPERLINK

If a web page includes a hyperlink to a media file, most browsers will use a “helper application” to play the file.

EXAMPLE:


<a href="song.mp3">Play the song</a>

INLINE AUDIO

When sound is included in a web page, it is called inline sound.

NOTE:

Posted in Html Tagged with: ,