jQuery Audio Background | Lessoncup Programming Blog

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.
<div id="sound">

<ul>
<li>
<audio id="audioplayer" loop autoplay=true>
    <source src="sounds/heart_touching_tone.mp3" type="audio/mpeg">
   <source src="sounds/heart_touching_tone.ogg" type="audio/ogg">
  Your browser does not support the audio element. </audio>
  
  
<a id="play-btn" style="display:none;" title="Click to play"><img src="play.png" width="32" height="32"></a>
<a id="pause-btn" title="Click to pause"><img src="pause.png" width="32" height="32"></a> 
</li>
<li><a id="volUp" title="volume increase"><img src="1384857638_34.png" width="32" height="32"></a></li>
<li style="margin:0;"><a id="volDown" title="volume decrease"><img src="1384857774_icon-minus.png" width="32" height="32"></a></li>

</ul>

</div>

<div id="lessoncup">

<img src="1384852760_kmixdocked_error.png" width="128" height="128">

</div>

CSS

<style>

#sound{position:fixed; right:0; background-color:#F00; top:50px; padding:5px; width:30px; box-shadow:0 0 5px #333; -webkit-box-shadow:0 0 5px #333; cursor:pointer;}

#sound ul{ list-style:none; margin:0; padding:0;}

#sound li{ margin-bottom:10px;}


</style>

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 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $("#volUp").click(function(){

 $("#audioplayer")[0].volume +=0.1;
 
 });
 
 
 $("#volDown").click(function(){
    
 $("#audioplayer")[0].volume -=0.1;
 
 });
 
 $("#play-btn").click(function(){
  
  $("#audioplayer")[0].play();
  $("#pause-btn").show();
  $(this).hide();

  })    
 
  $("#pause-btn").click(function(){
   
   $("#audioplayer")[0].pause();
   $("#play-btn").show();
   $(this).hide();
  }) 
  
 
});

</script>

Live Demo   Download Script

4 comments :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons