JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Web Audio API</title>
</head>
<body>
  <p class="play">Play</p>
  <p class="stop">Stop</p>
</body>
</html>

CSS

.play {
    display:inline-block;
    margin:5px;
    width: 24px;
    height: 32px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMZJREFUeNq0lt0NgzAMhIPlfWAR1BXYpDBSxSCFiYr70CqKUH6cO0t+SEC++xxkIvP8eFuOgRRiOVkeJvJkCAxW+BOtD8tl318nkiAOOE1KENA0knkGockRQGik8j03TS2Bm0YcbW2i8RA00UjnZ16k6SUo0ghw7NzSIAluaSRw4k/DEqCcQdqiyVq0KaH4+i38WyjjYONNZbhGChRHhTJc9wo0jWtluPYIuH+ZynBdKwC5tijDdU4AfnVUhutUAO46jkuAAQD+jXZOTODXVwAAAABJRU5ErkJggg==);
    text-indent:-200px;
}
.stop {
    display:inline-block;
    margin:5px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACxJREFUeNrszUERAAAEADD0c/q3UYLfVmDZPfGp4plAIBAIBAKBQCC4sgIMAJggASlttpE8AAAAAElFTkSuQmCC);
    text-indent:-200px;
}
p:hover {
    cursor:pointer;
    opacity:0.8;
}

JavaScript

(function() {
    var context, soundSource, soundBuffer, url = 'https://www.soundsnap.com/streamers/play.php?id=1527025557.0093:d3e534e8a940ad8e58b16c30c3a87ff6faa4cb52:48fc32dbc16b7a16eccdb9b98b0b46053a08159ab9496e0ed8c182306562c17099a3a5c9ad760297d86d387e3ff4167bd20dad519dc1c7f452b27fa772d08824c1ee9cf55b6ff3dd39c9e9ffaf192d4760a5f230631610e7e7b08aba86de79b272da7c14dce5e1ec10007e4b4a97c8af210903c85f443648d075763c6f621b415809a844a1eb6d09592164d9934ba09fece40c48f4bcb02ede65db0eea9ab9e0c829973abed39c8cd69d08c714d1f303e5d0508d9807e2fb7156ecf3243dd0b1a837ac7622416420dcbae5ed3895b51eb2dfec9b3df405f8f0989458e6fe2d30';

    // Step 1 - Initialise the Audio Context
    // There can be only one!

    function init() {
        if (typeof AudioContext !== "undefined") {
            context = new AudioContext();
        } else if (typeof webkitAudioContext !== "undefined") {
            context = new webkitAudioContext();
        } else {
            throw new Error('AudioContext not supported. :(');
        }
    }

    // Step 2: Load our Sound using XHR

    function startSound() {
        // Note: this loads asynchronously
        var request = new XMLHttpRequest();
        request.open("GET", url, true);
        request.responseType = "arraybuffer";

        // Our asynchronous callback
        request.onload = function() {
            var audioData = request.response;

            audioGraph(audioData);


        };

        request.send();
    }

    // Finally: tell the source when to start

    function playSound() {
        // play the source now
        soundSource.start(context.currentTime);
    }

    function stopSound() {
        // stop the source now
        soundSource.stop(context.currentTime);
    }

    // Events for the play/stop bottons
    document.querySelector('.play').addEventListener('click', startSound);
    document.querySelector('.stop').addEventListener('click', stopSound);


    // This is the code we are interested in

    function...