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

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 :

  1. oddnan
  2. graphics

Leave a Reply

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Skip to toolbar