XHR responseType = 'arraybuffer' does not work in Firefox

Question

    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 app has a function to send a XMLHttpRequest whose responseType is 'arraybuffer'. There is no error when used on Chrome, Safari, however Firefox gives me an error 'InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable'.

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