Link to home
Start Free TrialLog in
Avatar of swgdesign
swgdesignFlag for United Kingdom of Great Britain and Northern Ireland

asked on

JQuery hover fade in/out sound

I have the following code that plays a sound on rollover and pauses and rewinds it on hover off. What I would like to do is fade in and fade out the sound on hover and hover off.

What do I ened to change in my code for the sound volume to increase and decrease etc?

  var waveshover = $('.wavesound');
	var wavesaudio = waveshover.find('audio')[0];
	var firehover = $('.firesound');
	var fireaudio = firehover.find('audio')[0];
	var junglehover = $('.junglesound');
	var jungleaudio = junglehover.find('audio')[0];
	
	//jungleaudio.muted = false;
	jungleaudio.volume = 0.1;
	
	//wavesaudio.muted = false;
	wavesaudio.volume = 0.1;
	
	//fireaudio.muted = false;
	fireaudio.volume = 0.5;
   
        $('#Ocean2').hover(
		function() {	
			wavesaudio.play();
        });
    
    $('#Ocean2g').hover(
		function() {},
		function () {
			wavesaudio.pause();
			wavesaudio.currentTime = 0
    });

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

What is the player?

jPlayer?

I suggest you try

http://api.jquery.com/animate/#step

$('#Ocean2g').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    fireaudio.volume=now
  }
});
Avatar of swgdesign

ASKER

There is no player involved. I am just using HTML5 and jquery.

What does the opacity and height have to do with my sound? It won't change the volume!
Change the hover to animation and you get the step - that is what I could find.
If fireaudio.volume changes will change the sound, then that would be a way to do it

Otherwise use setInterval

.hover(function() {
   tId = setInterval(function() {
    if(fireaudio.volume) > .0 fireaudio.volume--;
    else clearInterval(tId)  },
  100);
})
OK I get that, sort of makes sense but is a bodged way to do it.

I have already tried setInterval but I could not play the sound and get the setinterval bit to work.
So does my setInterval work better?
No, because I cannot get the setinterval work with the .play method when the user hovers over the trigger element.

Can you add in your code into mine so I can see how it should be structured please?
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Awesome thanks.