JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="myAudio">
    <source src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<button id="playBtn" type="button" onclick="aud_play()">Play</button>
<button id="fadeBtn" type="button" onclick="aud_fade()">Fade</button>

JavaScript

var fadeTimer = false;

var aud_play = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    myAudio.volume = 0; // 0 not 1, so we can fade in
    myAudio.currentTime = 0;
    myAudio.play();
    aud_fade_in();
};

var aud_fade_in = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume < 9.995) {
        myAudio.volume += 0.005;
        fadeTimer = setTimeout(aud_fade_in,10);
    } else {
        myAudio.volume = 1;
    }
};

var aud_fade_out = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume > 0.005) {
        myAudio.volume -= 0.005;
        fadeTimer = setTimeout(aud_fade_out,5);
    } else {
        myAudio.volume = 0;
        myAudio.pause();
        myAudio.currentTime = 0;
    }
};

var playBtn = document.getElementById('playBtn');
var fadeBtn = document.getElementById('fadeBtn');

playBtn.addEventListener('click', aud_play, false);
fadeBtn.addEventListener('click', aud_fade_out, false);