JSFiddle - React, Tailwind, and code Playground

by Chinmay Pendharkar

HTML

<body>
    <button id="button">Click Me</button>
</body>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var random = context.createBufferSource();
var player;
var loadedBuffer;
window.addEventListener('load', function () {
    var button = document.querySelector('#button');
    var url = 'https://dl.dropboxusercontent.com/u/77191118/sounds/bongo1.mp3';
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";
    request.onload = function () {
        console.log("loaded");
        context.decodeAudioData(request.response, function (buffer) {
            console.log("decoded");
            loadedBuffer = buffer;
            // player = context.createBufferSource();
            // player.connect(context.destination);
            // player.buffer = loadedBuffer;
            // player.start();
            button.addEventListener('click', function () {
                console.log("tapped");
                player = context.createBufferSource();
                player.connect(context.destination);
                player.buffer = loadedBuffer;
                window.requestAnimationFrame(function () {
                    player.start();
                }, 0)
            })
        });
    }
    request.send();
});