jQuery: Sound on Hover and Click

Get Started
21

Ok, I’ve just uploaded them here: hidden

22

When I open that link I am redirected to: http://www.2shared.com/?err=1001

23

I may have posted the wrong link, i.e. the one for administration.
Here is, I hope, the correct link: http://www.2shared.com/file/fj3YYsnS/sounds-hoverclick.html

24

No probs.

Here’s the updated code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?1027319-jQuery-Sound-on-Hover-and-Click-->
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/atooltip.jquery.js"></script>
    <script type="text/javascript" src="js/kwicks-1.5.1.pack.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <style type="text/css">
    a { text-decoration:none }
    </style>
  </head>

  <body id="page1">
    <div class="body1">
      <div class="body2">
        <div class="main">
          <header>
            <h1><a href="index.html" id="logo"></a></h1>
          </header>
          <section id="content">
            <div class="cont_bot_left"></div>
            <div class="cont_bot_right"></div>
            <div class="cont_top_left"></div>
            <div class="cont_top_right"></div>
            <div class="inner">
              <div class="kwiks_wrap">
                <ul class="kwicks horizontal">
                  <li id="page_1">
                    <div class="text">WELLCOME</div>
                    <div class="cont">
                    </div>
                    </li>
                  <li id="page_2">
                    <div class="text">OUR SERVICES</div>
                    <div class="cont">
                    </div>
                  </li>
                  <li id="page_3">
                    <div class="text">OUR APPROACH</div>
                    <div class="cont">
                    </div>
                  </li>
                  <li id="page_4">
                    <div class="text">TESTIMONIALS</div>
                    <div class="cont">
                    </div>
                  </li>
                  <li id="page_5">
                    <div class="text">CONTACT</div>
                    <div class="cont">
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>

    <script>
      $(document).ready(function(){
        var a = document.createElement('audio');
        if (a.canPlayType){
          if ((a.canPlayType('audio/mp4;') || a.canPlayType('audio/mpeg;') ||  a.canPlayType('audio/ogg;')).replace(/no/, '')){
            var audioPossible = true;
          }
        }

        if (audioPossible){
          function addSource(elem, path) {
            $('<source>').attr('src', path).appendTo(elem);
          }

          $(".text").each(function(){
            var audioClick = $('<audio />', {
              preload : 'auto',
              class: 'click'
            });
            addSource(audioClick, 'audio/click' + '.mp3');
            addSource(audioClick, 'audio/click' + '.ogg');
            addSource(audioClick, 'audio/click' + '.wav');
            audioClick.appendTo($(this));

            var audioHover = $('<audio />', {
              preload : 'auto',
              class: 'hover'
            });
            addSource(audioHover, 'audio/hover' + '.mp3');
            addSource(audioHover, 'audio/hover' + '.ogg');
            addSource(audioHover, 'audio/hover' + '.wav');
            audioHover.appendTo($(this));

            $(this).on("click", function(){
              $(this).find("audio.click")[0].play();
            });

            $(this).on("mouseover", function(){
              $(this).find("audio.hover")[0].play();
            });
          });
        }
      });
    </script>
  </body>
</html>

Here’s the updated demo.

25

Ok, great, it works. I just have to correct the volume of the sound for “click”. It has a greater volume than the one for “hover”. I think that I can fix that using Audacity.
Wow, awesome. Thanks Dave.

26

No probs :slight_smile:

You can also be able to use mp3Gaiin to correct the volume: http://mp3gain.sourceforge.net/

27

Awesome. mp3Gain was the best.

28

Thanks. Stupid DOMIAN move. That was the hardest part. All the links