Playing Sounds On Mouse Hover Using HTML5

HTML5 has amazing features to create highly interactive web apps. I think HTML5 and CSS3 can do anything that Flash do. Today we will see how to made an app which plays sound when mouse hover on a html element.
I made this demo very easy to understand. In this demo we will have two sounds(audios) and two anchor tags. Sounds will be played when we hover on a anchor tags.
Playing Sounds On Mouse Hover Using HTML5 Audio


demo

download

This is very useful if you want to create highly interactive web apps. People can use web apps very easily. You should have any of these browsers(Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) for this demo. Make sure you turned of internet download manager.
HTML

<section>  
<audio id="welcomeSound" controls="controls" preload="auto">  
<source src="audio/welcome.mp3"></source>  
<source src="audio/welcome.ogg"></source>  
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.  
</audio>  
<audio id="shutdownSound" controls="controls" preload="auto">  
<source src="audio/shutdown.mp3"></source>  
<source src="audio/shutdown.ogg"></source>  
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.  
</audio>  
<p class="info">  
Use latest Browser Chrome or FireFox.<br /> If you usig Internet download manager please close it.  
</p> 

<a id="welcomeTxt" href="#">  
Welcome(Mouse hover here)  
</a>  
<br />  
<br />  
<br />  
<a id="shutdownTxt" href="#">  
Shutdown(Mouse hover here)  
</a>  
</section> 

Here we using audio tags with two kinds of audio format because OGG(for friefox),MP3(for chrome). If the audio tag is not support than it will display massage.
Styleing

article, aside, figure, footer, header, hgroup,  
menu, nav, section { display: block; }  
p, pre {  
margin: 0 0 15px 0;  
} 
section {  
padding: 20px 0;  
overflow: hidden;  
text-align: center;  
} 
#wrap{ 
margin: 0 auto;  
width: 500px;  
} 
audio{  
display: none;  
} 
.logo{ 
text-align: center;  
} 
.logo a{ 
color:#fff;  
} 
#welcomeTxt,#shutdownTxt{ 
background: #000;  
padding: 10px;  
border-radius: 10px;  
text-decoration: none;  
} 

In this code if you observe we hideing audio tags so that user can't see them.
JavaScript Code

<script type="text/javascript">  
window.onload=function(){  
// collecting elements 
var welcomeSound = document.getElementById('welcomeSound');  
var welcomeTxt=document.getElementById('welcomeTxt'); 

var sdSound=document.getElementById('shutdownSound');  
var sdTxt=document.getElementById('shutdownTxt');  
//playing welcome sound on mouse over 
welcomeTxt.onmouseover=function(){  
welcomeSound.play();  
return false;  
}; 

sdTxt.onmouseover=function(){  
sdSound.play();  
return false;  
}; 

}; 
</script> 

Here we are using window.onload because we are using it in head section so that the script will execute after complete DOM is loaded otherwise we get error message.
Here first we  using document.getElementById to gather all elements.
We using onmouseover event to play sounds.
Hope you like it!

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.