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.
Live Demo
Download Script
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>
sound is not playing well on instant hover on tabs refer css tricks for fix
ReplyDeletehttp://css-tricks.com/play-sound-on-hover/