XHR responseType = 'arraybuffer' does not work in Firefox

    function getAudio(aUrl) {
    var deferred = $.Deferred();
    // ajax is not capable of arraybuffer
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'arraybuffer';
    xhr.open('GET', aUrl, true);

    // request succeeded
    xhr.onreadystatechange = function() {
        if (
            (xhr.readyState === 4) && 
            (xhr.status === 200) && 
            (xhr.status !== 404)
            ) {
            audioCtx.decodeAudioData(xhr.response, function(buffer) {
                buf = buffer;
                return deferred.resolve(true);
            });
        } 
    };
    xhr.onerror = function() {
        return deferred.resolve(false);
    };
    xhr.send();
    return deferred.promise();
}

      

        
        
        
      

    

My application has a function to send an XMLHttpRequest whose responseType is "arraybuffer". No error when used in Chrome, Safari browser, however Firefox gives me the error "InvalidStateError: Attempting to use an object that is not or is no longer available".

Many tutorials seem to have similar code. How can this be solved? One note is that the "aUrl" argument is not a local path. ex) " https://api.soundcloud.com/tracks/121818867/stream?client_id=8f474de4d1dedd5a6a4f4cbb60f4e6b8 "