swgdesign
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?
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
});
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!
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);
})
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);
})
ASKER
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.
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?
ASKER
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?
Can you add in your code into mine so I can see how it should be structured please?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Awesome thanks.
jPlayer?
I suggest you try
http://api.jquery.com/animate/#step
$('#Ocean2g').animate({
opacity: .5,
height: '50%'
},
{
step: function(now, fx) {
fireaudio.volume=now
}
});