0

I'm about to add a sound on my links on mouse over, then will stop on mouse out and when it hover again, the sound will start to beginning.

I'm about to put it on links but what I'm not sure about is on how to add a function on my links:

The first thing I did is I added an audio on each links using javascript.

$('<audio src="http://audiopath/kiss.ogg" id="mySound"></audio>').appendTo('a');

Then I've added a function that will play the audio on mouse over which I just get from the other post.

function PlaySound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.play();
};

function StopSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.pause();
    thissound.currentTime = 0;
};

I've tried to add a function those links but I'm having error. I just read from the other posts that it can be insert using attr.

$('a').onmouseover(function(){
    $(this).attr('PlaySound', ('mySound'));
});

$('a').onmouseout(function(){
    $(this).attr('StopSound', ('mySound'));
});

I'm implementing an output like this:

<a onmouseover="PlaySound('mySound')" onmouseout="StopSound('mySound')" href="#">Hover Over Me To Play</a>

Please help guys.....

2 Answers2

0

Try this,

$('a').hover(function(){
    PlaySound('mySound');// calling playsound function
},function(){
    StopSound('mySound');// calling stopsound function
});

And change your anchor tag like,

<a href="#">Hover Over Me To Play</a>
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • OMG! That works! I'm still noob when it comes into a complicated code like this. Thank you much. –  Apr 07 '14 at 12:21
0

Change to this:

$('a').on('mouseover', function(){
    $(this).attr('PlaySound', ('mySound'));
});

$('a').on('mouseout', function(){
    $(this).attr('StopSound', ('mySound'));
});

If it doesn't work you can try mouseenter instead of mouseover (see the difference). The same for mouseleave vs mouseout

Community
  • 1
  • 1
Marco Prins
  • 7,189
  • 11
  • 41
  • 76