Sunday, December 30, 2012

  • Buffer

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

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!

11 comments :

  1. Thank You SO very much!!!!

    ReplyDelete
  2. You are welcome

    ReplyDelete
  3. Hi, thank you for this nice tutorial. I just wonder if there is any possibility in JS to search for classes instead of ID's. I tried with "getElementsByClassName", but it doesn't work...

    ReplyDelete
    Replies
    1. Why don't you use jquery library.

      Delete
    2. This still doesn't work.

      var chirp = document.getElementById('twitterSound');
      var tweet = $(".social-twitter");

      Delete
    3. Wrap it in side document.ready or as

      $(function(){
      var chirp = document.getElementById('twitterSound');
      var tweet = $(".social-twitter");

      });

      Delete
  4. My javascript skills are bad... No, there are none.

    The second one is still not working: http://pastie.org/7801483

    ReplyDelete
    Replies
    1. It's ok buddy. Every beginner feels like that. Just keep practice. First learn basics then you will fell comfortable . Now come to your code. You don't need to use
      $(function(){
      //Your code goes here
      });
      if you using window.onload;

      Could you tell me what actually you trying to do.

      Delete
    2. I modify your code like this this should work fine.


      <style>
      .hidden{
      display:none
      }
      </style>
      <audio id="logoSound" class="hidden" controls="controls" preload="auto">
      <source src="sound/logo.mp3"></source>
      <source src="sound/logo.ogg"></source>
      </audio>
      <audio id="twitterSound" class="hidden" controls="controls" preload="auto">
      <source src="sound/chirp.mp3"></source>
      <source src="sound/chirp.ogg"></source>
      </audio>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      <script type="">
      $undefinedfunctionundefined){

      var logoSound = $undefined'#logoSound');
      var chirp = $undefined'#twitterSound');

      $undefined'#logo').bindundefined'mouseenter', functionundefined) {
      logoSound.playundefined);
      });

      $undefined".social-twitter").bindundefined'mouseenter', functionundefined) {
      logoSound.playundefined);
      });

      });
      </script>

      Delete
  5. Thanks! I used it in my navigation bar :-)

    ReplyDelete
  6. Brilliant! Very clearly articulated and presented decisively. Thank you!

    ReplyDelete