HTML Audio Sound

HTML Audio Sounds



  • 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