Background Music On/Off Icon for a website using HTML5 Audio and Javascript

Posted by on in HTML, JQuery

HTML5 is the latest and fifth revision of HTML (Hyper Text Markup Language). As of now HTML5 is still under development.

There are many new elements added to the HTML5. If you want to look into the HTML5 Features, please visit HTML5 Features.

Another main feature of HTML5 is Application Cache for offline storage, which means you can operate and view your website if you do not have internet connection. If you want to learn more about the Application Cache Offline Storage

Have you heard about the HTML5 Local Storage

In this post I will discuss with you the HTML5 audio tag with a live example. Until now, there has never been a standard for playing audio on a web page. Most audio are played through a plugin (like flash).
HTML5 specifies a standard way to include audio, with the audio element.

The HTML5 audio tag can be simply used by using the audio tag. Here’s an example.

Now some people who sells products online wants to have some music or introduction text in the background so that the users can hear the music besides just looking into the website products.

But having an background music always playing in the background,especially if there is no option to stop the music some users feels irritating and they will leave the website. So to make site accessible and usable to all users a music on/off button is required in the website. So if a user doesn’t wants to listen to the music, there is an option to stop the music.

This can be done by checking the audio tag options and place the icon accordingly using Javascript.

Below is the demo and download link for the code :

You would also like:

About Sam

Web Developer by Profession, Human by Nature, Blogger by Passion. More than 5 years of experience in PHP, JQuery, Drupal, Cake PHP, HTML, CSS and Javascript. You can follow me on Twitter and also on Digg. Also you can email me at sam@codeinsects.com.

Comments

  1. By graphics on

    Way cool! Some extremely valid points! I appreciate you writing this article and also the
    rest of the site is also very good.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>