jQuery: Sound on Hover and Click

[DanielDG]

Hello

I've just built my website using free online templates and scripts.

The only thing I couldn't figure out is how to furnish my website with sounds on hover and click. I tried many if not all available online scripts, but to no avail.
I guess they were not meant for use with jQuery scripts and menus.
Could you please help me out?

Thanks!

Daniel

[Pullo]

Hi Daniel,

Welcome to the forums.

Here is quite a comprehensive tutorial on how to accomplish this:
CSS Tricks - Play sound on hover
Demo of the above

[DanielDG]

Thanks Pullo, but I myself also found that, but I just couldn't find a way to make it work.

[Pullo]

It shouldn't be too difficult.
Could you post a link to what you tried?

[DanielDG]

I've initially posted a link, but was deleted by the administrator on the grounds that it wasn't necessary (absolutely false!). My site can be found here: http://axiolexis.ro
Take a look. I just couldn't make it work, and believe me, I tried hard. Maybe I'm missing something, but I believe the example provided by the tutorial you've posted is not applicable to my kind of jQuery menu.
By the way, I removed the sound scripts because they didn't work. You can download my site using HTTrack and try for yourself.

[Pullo]

I've initially posted a link, but was deleted by the administrator on the grounds that it wasn't necessary (absolutely false!). My site can be found here: axiolexis{dot}ro

Sorry about that, but we do get a lot of spam monkeys here, so Dave was just probably being cautious.

Take a look. I just couldn't make it work, and believe me, I tried hard. Maybe I'm missing something, but I believe the example provided by the tutorial you've posted is not applicable to my kind of jQuery menu.

Nah, I reckon I could get it to work with that menu, too.
If you make me a stripped down version of the page (i.e. just the menu, no other content and no other styling), I'll be happy to have a look at implementing that for you.

[DanielDG]

Thanks a million Pullo. Here's the template I used: http://blog.templatemonster.com/2011...on-navigation/
Should I send you the stripped version by mail or how?

[Pullo]

Thanks a million Pullo. Here's the template I used: http : / / blog.templatemonster{dot}com /2011 /04 / 25/ free-business-website-template-accordion-navigation/
Should I send you the stripped version by mail or how?

It no problem to post links, especially if they are on-topic.
You won't get jumped on by a mod

The easiest thing for me would be if you made a page on your site where I could see just the bare bones accordion.
Here you could remove all of the CSS styles not associated with the accordion, all of the JS not associated with the accordion, as well as all of the superfluous content.

[DanielDG]

Ok. I've stripped it as much as I could, so as not to deface it. I've uploaded it here: http://www.2shared.com/file/KhmfH1Xx/BAREBONE.html

[Pullo]

Hi,

OK, I got that.
I've got to go to work now but I'll have a look at it later and get back to you.

[DanielDG]

No problem. I also got to go to school. Cheers!

[Pullo]

When you put it like that, work almost sounds better
Thanks for such a concise example, BTW. This will make things much easier.

[PicnicTutorials]

Here is how I did it when i needed to. http://www.schillmania.com/projects/soundmanager2/. And here is the tut I did on it. http://www.websitecodetutorials.com/...mouse-over.php. If you need multiple elements to do sounds that is out of my scope. I'm sure it's possible though.

[DanielDG]

I've attached a screenshot of the error I receive on mousing over the image of the template using that script.

error on mouse over.png

The problem is that the first dialog window is unresponsive, and you cannot change the settings. Thus, if I were to implement such a script on my site, I may just cripple it and make visitors regret having visited.

[Pullo]

Hi Eric,

Daniel is correct.
Your demo isn't working as the following file is returning a 404.

http://www.websitecodetutorials.com/code/javascript/soundcontroller.swf

[Pullo]

Hi again,

So I hooked up your menu so that the sound now plays when you click on any of the accordion tabs.

Here's a demo.
You can download the files from here.

And just to be complete, here's the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <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 type="text/javascript" src="js/jquery-1.5.2.js" ></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 audio = $('<audio />', {preload : 'auto'});
            addSource(audio, 'audio/click' + '.mp3');
            addSource(audio, 'audio/click' + '.ogg');
            addSource(audio, 'audio/click' + '.wav');
            audio.appendTo($(this));     
            
            $(this).click(function(){
              $(this).find("audio")[0].play();
            });
          });
        }
      });
    </script>
  </body>
</html>

I hope that helps. Let me know if you have any questions.

[DanielDG]

Thanks Dave,

I really appreciate it. The thing is that I also wanted some sound on hover.

[Pullo]

No problem!

Update your version of jQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Then change this:

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

Into this:

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

[DanielDG]

Ok Dave,

I've managed to follow your instructions. It works. Thanks a lot.
Nonetheless, I was thinking of using different sounds for hover, and click.

I've just bragged to a friend that my site now has sound on hover and click, and she told me that she doesn't like it and that an option to turn off sound would be welcome. Can you believe this?

[Pullo]

Then you'd need to append two audio elements to each tab and play a different one depending on the action.
If you post a link to a second (different) audio clip, I'll update the demo for you.

[DanielDG]

Ok, I've just uploaded them here: hidden

[Pullo]

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

[DanielDG]

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...overclick.html

[Pullo]

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.

[DanielDG]

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.