SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: Sound on Hover and Click

    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
    Last edited by DaveMaxwell; Apr 10, 2013 at 05:33. Reason: removed uneeded link

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, but I myself also found that, but I just couldn't find a way to make it work.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    It shouldn't be too difficult.
    Could you post a link to what you tried?

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by DanielDG View Post
    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.

    Quote Originally Posted by DanielDG View Post
    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.

  7. #7
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by DanielDG View Post
    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.

  9. #9
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

  11. #11
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. I also got to go to school. Cheers!

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    When you put it like that, work almost sounds better
    Thanks for such a concise example, BTW. This will make things much easier.

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,626
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Eric,

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

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

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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:

    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.

  17. #17
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave,

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

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No problem!

    Update your version of jQuery:

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

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

    Into this:

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

  19. #19
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

  21. #21
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've just uploaded them here: hidden

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    When I open that link I am redirected to: http://www.2shared.com/?err=1001

  23. #23
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No probs.

    Here's the updated code:

    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. #25
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Romania
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •