• Have Any Question?
  • contact@eitworld.com

HTML Audio Sound





  • You can play audio in html by using various different-different methods:

1.Using the Yahoo Media Player

2.Using Plugins:     i.Using The <object> Element

ii.Using The <embed> Element

3.Using the <audio> Element

4.Using A Hyperlink

  • Now we are going to introduce each method in details:

1.Using the Yahoo Media Player

    • You can use “Yahoo Media Player” for playing audio sounds in html.
    • To use “Yahoo Media Player” you have to insert this code of JavaScript in the head section of your web page:
<script type=”text/javascript” src=”http://mediaplayer.yahoo.com/js”></script>
    • Then you simply link to your MP3 files in your HTML webpage using <a> tag, and the JavaScript code automatically creates a play button for each song:
<a href=”song1.mp3″>Play Song 1</a>

Example

<!DOCTYPE html >
<html>
<head>
<script type=”text/javascript” src=”http://mediaplayer.yahoo.com/js”></script> </head>
<body>
<a href=”01 Gayati Mantra.mp3″>Play Song</a>
</body>
</html>

To see live output : Visit Try Yourself Editor
The above example shows play button in front of you and when you click the button, a full player pops up.

2.Using Plugins:

      • A Plugin is a small computer program that extends the standard functionality of a web browser.
      • Plugins can be used to display music, display maps, verify your bank id, control your input, and much more.
      • Plugins can be added to your html webpages using these two elements:

    ◉ <embed> tag

    •     ◉ <object> tag
◉ Using <embed> tag
    • <embed> tag is used to embed mumtimedia elements in your html webpage.
    • you have to simply use the given statement for this purpose:
<embed height=”100px” width=”300px” src=”01 Gayati Mantra.mp3″ />
    • The following example plays an MP3 audio sound by using <embed> tag:

Example

<!DOCTYPE html >
<html>
<body>
<embed height=”100px” width=”300px” src=”01 Gayati Mantra.mp3″ />
</body>
</html>

To see live output : Visit Try Yourself Editor

◉ Using <object> tag
    • <object> tag is used to embed mumtimedia elements in your html webpage.
    • you have to simply use the given statement for this purpose:
<object height=”100px” width=”300px” data=”01 Gayati Mantra.mp3″ />
  • The following example plays an MP3 audio sound by using <object> tag:

Example

<!DOCTYPE html >
<html>
<body>
<object height=”100px” width=”300px” data=”01 Gayati Mantra.mp3″ />
</body>
</html>

To see live output : Visit Try Yourself Editor

3.Using the <audio> Element

    • The <audio> element is an HTML 5 element, unknown to HTML 4, but it works in new browsers.
    • you have to simply use the given statement for this purpose:
<audio controls=”controls”> <source src=”01 Gayati Mantra.mp3″ type=”audio/mpeg” />
<source src=”01 Gayati Mantra.ogg” type=”audio/ogg” />
Your browser does not support this audio
  • The following example plays an MP3 audio sound by using <audio> element:

Example

<!DOCTYPE html >
<html>
<body>
<audio controls=”controls”> <source src=”01 Gayati Mantra.mp3″ type=”audio/mpeg” />
<source src=”01 Gayati Mantra.ogg” type=”audio/ogg” />
Your browser does not support this audio
</audio>
</body>
</html>

To see live output : Visit Try Yourself Editor

4.Using A Hyperlink

    • Using a hyperlink or <a> tag, the multimedia cannot be associated within the page but it can be linked with the page.
    • <a> tag may open the multimedia or ask to download it after clicking on the hyperlink.
    • The location of the multimedia file will be specified as the value of href attribute. The mentioned file name must include its extention (.mp3, .mp4, .avi etc.).
    • you have to simply use the given statement for this purpose:
<a href=”01 Gayati Mantra.mp3″>Play the song</a>
  • The following example plays an MP3 audio sound by using hyperlink:

Example

<!DOCTYPE html>
<html>
<body>
<a href=”01 Gayati Mantra.mp3″>Play the song</a>
</body>
</html>

To see live output : Visit Try Yourself Editor



Real Time Web Analytics