Monday, August 15, 2011

HTML5 Tutorial 8: Adding Audio to your page

Another great feature included in HTML5 is the ability to directly include audio without having to use an external service, javascript or Flash. Until now there has never been a standard audio player for browsers. If you wanted to place audio on your site you either had to use one of the available players such as Windows Media Player or Quicktime player. With HTML5 audio there is just simple code to use to place audio anywhere on the page without have to have a separate audio player or 3rd party service hosting your audio.

This is how the code for Audio looks:
<audio src="http://www.archive.org/download/NyanCatlongVer/NyanCatLong6Hours.ogg" controls preload="auto" autobuffer></audio>
There are several attributes you can use along with your tag to customize your player. The attributes include autoplay, control customization, looping and pre-loading. Which means you can start your video when someone opens your page, customize what controls they see on the audio player and even loop the video so it plays continuously over and over.

So with the implementation of this tag it is going to become much easier for the average webmaster to add audio to their websites and blogs. The HTML5 video tag is also new and is similar in that it provides and across the board video player for putting videos on your site.

Right now HTML5 tags especially the audio and video tags are very experimental. Browser support while getting better is still in its infancy stages which means that as cool as these tags are implementing them into your designs now is going to leave a huge part of the PC internet users unable to see the content on your site.

One also has to wonder what the effects of HTML5 audio and video tags on web hosting. Until now most web hosts could depend on the fact that if a blog or small website wanted to use video or audio it was likely they would host it elsewhere.

With the ease of using these tags I have a feeling once they become more of a standard and are more widely used web hosts are going to see far more people hosting big audio and video files on their servers. Which could mean a rise in web hosting costs depending on how much extra storage space and bandwidth is being used.

HTML5 is coming there is no way around it but it is going to take some time before you can safely use it in your websites. Tags like the HTML5 audio tag are going to make certain elements of design so much easier, so until then we will just wait.

18 comments:

  1. Ill be learning HTML 5 at Uni soon, this is a good read to get ahead! Thanks.

    ReplyDelete
  2. great, I love HTML5 tutorials. great tip on audio :)

    ReplyDelete
  3. Now I can add looping Nyancat to ALL OF MY PAGES! MWAHAHAHAHAHAHA!

    But no, not really. That would be torturous.

    ReplyDelete
  4. I hate blogs that play audio immediately

    ReplyDelete
  5. I need to learn all this, but it looks so easy!

    ReplyDelete
  6. Woah, that really is the next step in web design, relying less and less on 3rd party programs... html5 rocks.

    ReplyDelete
  7. This is great info, learning with every post!
    Thank you.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. looks alot easier than standard HTML

    ReplyDelete
  10. loving your HTML5 tutorials! HTML5 seems a hell of a lot better than eveyrthing else

    ReplyDelete
  11. Lots of great features are offered in HTML5, that's for sure. This is definately one of them. I can't wait until it becomes THE standard.

    Your post definately helps push things along.

    ReplyDelete
  12. Best tutorial ever. I will definitely try to implement this on to my website in the future.

    ReplyDelete
  13. Thanks for the tutorial, I will def check it out!

    ReplyDelete
  14. Finally they made adding audio to a page much simpler. I'm liking HTML5 a lot better!

    ReplyDelete
  15. hey man. i just want to let you know i've been checking out your blog. quite intresting bro.. good luck to you...

    ReplyDelete
  16. Damn html5 is really a nice step in a good direction, always lookin for new tutorials on anything. +Following.

    ReplyDelete
  17. Lot of useful points are there. Its really keeps me updated.
    html5 player

    ReplyDelete