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

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 comment

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