Navigation Menu with Sound Effect

Hi, today i am going to tell you about making a menu bar with sound effect using jquery, generally if there is a requirement to play a sound while over the button we prefer FLASH, but now a days we can easily make a menu bar with sound effect using jQuery and Html5, i have developed a same concept using jquery, just it's few lines of code, have a look and use to your websites.

HTML

in html create the menu bar using LI tags and take audio tag to play a sound while hover the mouse on button just give it a ID name #audioplayer and keep  a sound file inside the SRC attribute

<audio id="audioplayer">
    <source src="sounds/glass_ping.mp3" type="audio/mpeg">
   <source src="sounds/glass_ping.ogg" type="audio/ogg">
  Your browser does not support the audio element. </audio>

<div class="lessoncup">

<ul>
<li>Lessoncup</li>
<li>Tutorials</li>
<li>jQuery</li>
<li>Ajax</li>
<li>Html5</li>
</ul>

</div>

CSS

<style>

.lessoncup{ width:670px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:22px;margin:0 auto;margin-top:200px;}

.lessoncup ul{list-style:none; margin:0; padding:0;}

.lessoncup ul li{ border-radius:5px;padding:30px;float:left; background-color:#9C3; color:#FFF; margin-right:3px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}

.lessoncup ul li:hover{background-color:#FC0;}

</style>

JAVASCRIPT

here write the mouse over function and give a LI tag as a selector, now inside the function just use play() method to #audioplayer to play the audio clip while hover the mouse on each LI tag, make sure the audio clip should be small

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $("li").mouseover(function() {

  $("#audioplayer")[0].play();
  
 });
 
     
});

</script>

Live Demo   Download Script