HTML5 Tutorial: “How to use the Audio Tag”

Posted on 13. Aug, 2011 by in HTML5 84 views

Skill Level: Beginner/Intermediate

Okay, so this tutorial will show you how to use the audio tag <audio></audio> in HTML5. You don’t need to embed an mp3 player into your website anymore, thanks to the advent of HTML5.

Before we begin, keep in mind that HTML5 is not completely launched yet; however it is partially supported by some newer browsers.

Let’s begin!

  1. Okay create a new folder anywhere on your hard drive and name it anything you want. I’ll name it “Audio_Tutorial”.
  2. Open the folder and paste your audio file into the folder you just created.
  3. Now create a new notepad text file in the same folder.
  4. Open the text file and write in all the standard HTML tags. Like this<html>
    <head>
    <title> HTML5 Tutorial: “How to use the Audio Tag” </title>
    </head>
    <body>    </ body>
    </html>

     

  5. Now between the body tags we will add the new HTML5 tag called the audio tag.

    <audio controls=”controls”>
    <source src=”testaudio.mp3” />
    </audio>
  6. If you want to play the audio file in the background instead of using a player, use the following code between the body tags:

    <audio autoplay=”autoplay”>
    <source src=”testaudio.mp3” />
    </audio>    Not recommended by me at all because it is very annoying for the user :)
  7. You can add a message like “browser not supported” under the <source src=”testaudio.mp3” />
    in step 5 or step 6. This way a user with an older browser will know what is wrong.
  8. Now save your notepad document as audio_test.html or any name you like as long as the extension is .html
  9. Open your browser and test your HTML5 new audio tag.
  10. Keep in mind, the player will look different in different browsers.
  11. There you go; now you have an audio player on your website.
  12. Enjoy!

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes