HTML5 – Sound on mouseover

This is an example which will play a beep sound when the mouse enter an element with the help of HTML5.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var beep = $("#beep")[0];
        $("#play").mouseenter(function() {
          beep.play();
        });
      });
    </script>
  </head>
  <body>
    <audio id="beep" controls preload="auto">
      <source src="music.ogg" type="audio/ogg" />
      <source src="music.mp3" type="audio/mp3" />
      Your browser isn't invited for super fun audio time.
    </audio>
    <span id="play">play sound</span>
  </body>
</html>


 

There should be a beep sound when your mouse enter the text play sound.

Please note that you need to have .mp3 and .ogg so that it could work on different browsers. For more info, please refer to
HTML5 – Play sound/music with <audio> tag @ 1

Done =)

Reference: Play Audio on :hover

Advertisements

4 thoughts on “HTML5 – Sound on mouseover”

  1. Good Job!!! No one can get this right. WP is tricky and I am not a code cutter, but can figure small chunks out. Now i cannot get the text higher up in the page. Still Hover-Roll over sound etc works.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.