WordPress.org

Ready to get started?Download WordPress

Forums

How to add sound to menu when hovering? (9 posts)

  1. YossiY
    Member
    Posted 1 year ago #

    Hello,
    I am using WP 3.4.2, with Twenty Ten theme.
    I am trying to add a specific sound (mp3 or wav) that will be heard when hovering over the menu.
    There is no information how to do that and which files need to be changed.

    Any help will be appreciated,
    Yossi.

  2. You'll need CSS and JS experience to do this.

    http://css-tricks.com/play-sound-on-hover/
    http://www.albinoblacksheep.com/tutorial/mouseoversound

    But... just me... I strongly advise against this. I consider it a generally bad idea to add sound files to any part of a website without the user first "agreeing" to hear the sound.

    It's multiplied when you have 15 or 20 webpages and programs open at once (I do it all the time).. and a sound starts screaming out of your speakers. Frantically, I start closing windows until I find the culprit. This might deter traffic away from your site.

    Just my two cents :)

  3. YossiY
    Member
    Posted 1 year ago #

    Thank you Josh.
    I saw the first link allready.
    My problem is where to put the code?
    Which file to use and where? to add the sound to the menu?

    By the way, the sound is only 2 sec and intended to play only when hovring the menu items.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    By the way, the sound is only 2 sec and intended to play only when hovring the menu items

    For some (many?) that's still objectionable. Lots of people will immediately leave a site if there is unwanted noise -- and if someone happens to be at work or school or someplace else like that, it can be a big problem to have sudden noise.

  5. Exactly WPyogi!

    I know, YossiY. I've had many sites where I have wanted to add (what I thought were) cool little sounds and interactivity. The only problem... it backfired on me EVERY time.

    Lesson learned: There are other, far more acceptable, and much more attractive ways of adding interactivity to your site without resorting to "sound bits".

    So, if you are still wanting to make us all suffer ;)... then here's a basic outline.

    1. You'll need the scripts and styles plugin.
    2. You need to enter the javascript into that plugin's admin panel.. for the <head> section.
    3. In your code, you'll want to add the ID into the html of whatever element you want to add the sound clip.

  6. YossiY
    Member
    Posted 1 year ago #

    May be you are right, but I need to see it working :-).
    Thank you, I'll try it.

  7. Okay... since you insist.. I'll want to know if it worked for you ;)

  8. YossiY
    Member
    Posted 1 year ago #

    Well...
    Installed scripts n style.

    Tryed this script in the head section:

    var audio = $("my-url")[0];
    $("nav a").mouseenter(function() {
      audio.play();
    });

    and it didn't work!?
    Any suggestions?

  9. You need either a . or a # in front of my-url to identify it as either a class or an id (depending on your html code).

Topic Closed

This topic has been closed to new replies.

About this Topic