Looking for a sound script that does this?

[crood58]

Hey all!

I am looking for a sound script that the user can turn on and off that uses javascript. Here is what I am using it for.

I have an imagemap with hotspots when you click on that hotspot a div shows below the imagemap with information using a javascript. For that hotspot on the imagemap I want to sound to play when it is clicked also. After the sound does a loop to stop playing.

Here is the catcher, I would like to give the user the option to turn the sound on and off. So I probably would have to use a radio button button, but if that is clicked the sound won't play. If I need to have two radio buttons one for the sound to be on and the other for it to be off that is fine.

Does anyone know where I can find such a script that will do this?

Thanks for the help in advance.

Chris

[Beverleyh]

You could try SoundManager2
http://www.schillmania.com/projects/soundmanager2/doc/download/
With it you can attach a javascript "Play()" event to anything (a div, a list item, a link, a button)

The SoundManager2 website styles dont seem to be working at the mo but download the software package and upload it to your server and view the documentation that comes with it there instead.
There are loads of examples under the Demo menu button - you just have to make sure you work through the folders and open all the "index.html" files to see the working examples as the button links dont open the pages directly (just the directories).

An example of a div which triggers a sound might be:

<div id="strum-trigger" style="cursor:pointer; cursor:hand"
onclick="soundManager.createSound({
id:'strum', url:'inc/media/strum.mp3', stream:true, autoLoad:true, autoPlay:true, multiShot:false
});
soundManager.play('strum')">
</div>

To give the user an option to turn off the sounds, I'd create a button which calls SoundManager2's "stopAll()" function ( onclick="soundmanager.stopAll();" ) but then also encorporate a bit of jQuery so the same button also hides all the divs/buttons/elements that trigger the sounds in the first place.
You can then have a 2nd button to turn sound back on again which would just be jQuery revealing all the divs/buttons/elements again that trigger the sounds.

Hope that helps

ps - A note on the sounds/music you use. Encode your audio to a max of 44.1KHz with 128kbps bitrate only otherwise otherwise it goes all chipmunk-y.

[crood58]

Hey Beverleyh,

Thanks for the excellent help!

I have a couple questions though.

The sound will be played when someone clicks on an image map target area. below that image that has the image map will be a div containing all the sound controls (i.e. buttons) what i would like to do is have two div's in that parent div with the buttons. The one div will show on the page load, because the audio will be on automatically, so that div will say "Sound On" if the sound is turned off then the second div that is hidden will show up saying "Sound Off" and the div that says the "Sound On" will hide. This possible and can this be executed i JQuery like you said?

Thanks,

Chris

[Beverleyh]

Hi Chris,

Do you mean like this? http://temp.jemcon.org/test/sound-test/sound-test.html

I'm no expert with jQuery so I'm sure somebody would be able to streamline the code some more but I think it does what you want. Hopefully you'll be able to look at the code and tinker with it to suit your needs - I've tried to lay it out logically.

I've attached the zipped package for you.
Its got all the component parts of SoundManager2 and jQuery already incorporated so you'll be able to upload it to your server and it will work as-is (the sound aspect wont work locally though, but the jQuery effects will).

Hope that helps.

EDIT - I dont think the attachment worked so here's a direct link instead: http://temp.jemcon.org/test/sound-test/sound-test.zip

[crood58]

That is exactly what I want, but don't want my images to disappear if the sound is off. Weather or not the sound is on or off I just want to be able to click on the target area of the image map.

Thanks,

Chris

[Beverleyh]

Try this: http://temp.jemcon.org/test/sound-test/sound-test2.html

(it works with the previously zipped jQuery and SoundManager2 files and folder structure so just right click the above page for the source code and paste it over the old zipped HTML)

I'm afraid I'm no expert with jQuery so I'm sure there is a much sleeker way of doing it but unfortunately I dont have that knowledege.

As it happens, I just cheated and layed down identical "base" divs underneath the sound-trigger ones. These "base" divs don't have the onclick='soundmanager' function attached, so when the divs sat on top of them are hidden with jQuery, they take the soundmanager function with them, leaving the soundless "base" divs behind.

Its a workaround in the absence of more advanced jQuery knowledge, but it sounds like you could make use of it.

Beverley

[crood58]

Beverly,

Thank you so much this what I needed to finish my project.

Chris

[Beverleyh]

No problem.

BTW - I see you're new but have you spotted those blue "Thanks" buttons under other people's posts? Those are for logging your thanks officially against useful posts in the system.

[crood58]

Bev,

I did not realize that button but I took care of it for you officially...

Chris