Pages

Tuesday, 19 November 2013

jQuery Audio Background

Hi, today i am going to show you how to put and control the background audio to your website. in html5 we have audio tag and using jquery we can create our own controls with good appearance. we can add the controllers at any corner of the website and easily manage the background audio to any webpage.

HTML

take the play, pause, and volume controlling buttons to manage and create the custom controls to audio player. and take the audio tag and give it name audioplayer and set the loop property to play the audio continuously, add the mp3 sound file to source tag and ogg format for firfox.

Javascript

write the click function to #play-btn, use play() method and add to #audioplayer tag and write click function to #pause-btn use stop() method in moth functions manage the audio play/pause icon.

now control the volume using volume property and put it inside the #volUp click function and use addition operation to increase the volume while clicking on button and use subtraction operator to decrease the volume while clicking on #voldown button