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

swgdesignAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Like this?

var tId;
$('#Ocean2').hover(function() {      
  tId = setInterval(function() {
    jungleaudio.volume--;
    if (jungleaudio.volume<=0) {
      clearInterval(tId);
      wavesaudio.play();
    }
  },100);
});
0
 
Michel PlungjanIT ExpertCommented:
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
  }
});
0
 
swgdesignAuthor Commented:
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!
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Michel PlungjanIT ExpertCommented:
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);
})
0
 
swgdesignAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
So does my setInterval work better?
0
 
swgdesignAuthor Commented:
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?
0
 
swgdesignAuthor Commented:
Awesome thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.