Techumber

Playing Sounds On Mouse Hover Using HTML5

Github avatar
Dimpu
December 30, 2012. 3 min read

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+undefined Chrome 3+undefined Opera 10.5+undefined Safari 4+undefined 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+undefined Chrome 3+undefined Opera 10.5+undefined Safari 4+undefined 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

articleundefined asideundefined figureundefined footerundefined headerundefined hgroupundefined
menuundefined navundefined section { display: block; }
pundefined 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;
}
#welcomeTxtundefined#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!


...