Playing Sounds On Mouse Hover Using HTML5

Published on December 30, 2012

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.

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

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;
  };
};

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!