JSFiddle - React, Tailwind, and code Playground

by Chinmay Pendharkar

HTML

<button id='button'>Change Buffer</button>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext
var context = new AudioContext();

var musicFile = 'https://dl.dropboxusercontent.com/u/77191118/sounds/DeepIntoIt.mp3'

var savedBuffer;

var sourceBuffer = context.createBufferSource();
sourceBuffer.connect(context.destination);

GetAudioFromURL(musicFile, function(err, buffer){
    savedBuffer = buffer;
    sourceBuffer.buffer = buffer;
    sourceBuffer.start(0);
}, null, null, context);
    
var button = document.getElementById('button');
button.addEventListener('click', function(){
    sourceBuffer.buffer = savedBuffer;
});

    
    
function GetAudioFromURL(URL, onLoadCallback, onProgressCallback, audioContext){
    if (!audioContext){
        window.AudioContext = window.AudioContext || window.webkitAudioContext
        audioContext = new AudioContext();
    }
    var request = new XMLHttpRequest();
    request.open('GET', URL, true);
    request.responseType = 'arraybuffer';
    request.onload = function () {
        audioContext.decodeAudioData(request.response, function(buffer){
            if (typeof onLoadCallback === 'function')
                onLoadCallback(null, buffer);
        },function (){
            if (typeof onLoadCallback === 'function')
                onLoadCallback(new Error("Decoding Error"), null);
        });
    };
    request.onerror = function(){
        if (typeof onLoadCallback === 'function')
            onLoadCallback(new Error("Loading Error"), null);
    }
    request.onprogress = function(event){
        if (typeof onProgressCallback === 'function'){
            onProgressCallback(event);
        }
    }
    request.send();
}