• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • Last Modified:

How to assign a different sound to different divs using the solution Gary gave me below?

Hello Experts ( including Gary. ;) )

Using Gary's solution to add sound to a div on a rollover. How do I use this method applying different sound for different divs. In example. DIV Apple - sound is a crunch : DIV Banana - a slip sound..etc?

Is it as simple as changing the id name "hoverme" to something to else like a"apple" and creating another version of "audio_test" an d call it "apple_test"?

And secondly, how do I apply a sound to a like a regular "close button"?

<audio id="audio_test">
    <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
        <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
<div id="hoverme">Hover me</div>

Open in new window


$("#hoverme").hover(function () {
    $("#audio_test").trigger('play');
}, function () {
    $("#audio_test").trigger('pause');
})

Open in new window



Thank you in advance.
0
colonelblue
Asked:
colonelblue
  • 4
  • 3
1 Solution
 
GaryCommented:
Create your audio elements giving each one a different ID e.g.
<audio id="audio_test1">
    <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
        <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
<audio id="audio_test2">
    <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
        <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
<div id="hoverme1">Hover me</div>
<div id="hoverme2">Hover me</div>

Open in new window

Duplicate your code for each DIV changing the target audio tag
$("#hoverme1").hover(function () {
    $("#audio_test1").trigger('play');
}, function () {
    $("#audio_test1").trigger('pause');
})
$("#hoverme2").hover(function () {
    $("#audio_test2").trigger('play');
}, function () {
    $("#audio_test2").trigger('pause');
})

Open in new window

0
 
GaryCommented:
And secondly, how do I apply a sound to a like a regular "close button"?
Just apply the same methodology
<div id="close">Close</div>
<audio id="close_sound">
    <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
        <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
...
$("#close").click(function () {
    $("#close_sound").trigger('play');
})

Open in new window

0
 
colonelblueAuthor Commented:
I think I love you Gary!

Thank you!!
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
GaryCommented:
*blushing*
0
 
colonelblueAuthor Commented:
Experts like Gary is why I have stayed subscribed. A credit to your site and service.
Thank you!
0
 
GaryCommented:
I'm like a beetroot!
0
 
colonelblueAuthor Commented:
LMAO!!! :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now