Search code examples
javascriptaudiofadeoutonmouseout

How to create a javascript function which fades audio out on mouseout?

I have a really simple bit of javascript that starts audio playback on mouseover of an image, and stops audio playback on mouseout.

How can I change the second function so that it fades the sound out gradually, rather than stopping it abruptly?

I have looked at other similar questions but I'm unfortunately still stuck. 

<img onmouseover="PlaySound('mySound')"
    onmouseout="StopSound('mySound')"
    src="tictactoe.png">

<audio id='mySound' src='audio.mp3'/>

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

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

It works effectively as it is, but it would be nice to add the fade out element. I know it's about setting the volume to decrease over time but I'm unsure of the right way to do that.

Solution

  • did you try use setInterval() and decrement the thissound.volume to 0 and then pause() ?

    also maybe an increase for the start of the sound would also be a nice thing to do