JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">hover here</div>

CSS

#test {
    background: black;
    color: red;
    width: 50px;
    height: 50px;
}

JavaScript

var test = new Audio("http://www.sounddogs.com/previews/25/mp3/228367_SOUNDDOGS__dr.mp3");

test.loop = true ;
test.play();
fade(0);

$('#test').hover(function() {
    fade(1);
    return;
}, function() {
    fade(0);
    return;
});


var targetVolume = 0;
var volumeIncrease = 0.0023 ; // in percent per millisecond

function fade( dest ) {
   targetVolume = dest ;
}

var lastTime = Date.now();
function fader() {
    var now= Date.now() ;
    var dt = now - lastTime ;
    lastTime = now;
    var diff = targetVolume - test.volume ;
    if (diff == 0 ) return;
    if (Math.abs ( diff )  < 5* volumeIncrease*dt ) {
        test.volume = targetVolume ;
        return ;
    }
    var chg = (diff > 0) ?  volumeIncrease : - volumeIncrease ;
    chg *=  dt ;
    var newTestVolume = test.volume + chg;    
    test.volume = newTestVolume ;
}

setInterval(fader, 20);