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");
var test = new Audio('http://home.comcast.net/~jdeshon2/wave_files/jad0003b.wav' ) ;
test.loop = true ;
test.volume = 0 ;
test.onload = function() { test.play(); }
test.play();

$('#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();
var currentVolume = 0;
function fader() {
    var now= Date.now() ;
    var dt = now - lastTime ;
    lastTime = now;
    var diff = targetVolume - currentVolume ;
    if (diff == 0 ) return;
    if (Math.abs ( diff )  < 5* volumeIncrease*dt ) {
        test.volume = targetVolume ;
        currentVolume = targetVolume ; 
        return ;
    }
    var chg = (diff > 0) ?  volumeIncrease : - volumeIncrease ;
    chg *=  dt ;
    var newTestVolume =  currentVolume + chg  ;    
    test.volume = newTestVolume ;
    currentVolume = newTestVolume ;
}

setInterval(fader, 20);