JavaScript Blob zwischenspeichern oder aus lokaler URL erstellen?

[Falc410]

Ich arbeite gerade an einem Tool bei welchem man auf einer Webseite über ein Mikrofon etwas aufnehmen kann und das dann an den Server schickt. Dafür benutze ich Recorder JS (hier inkl. Opus Encoder damit die Dateien kleiner sind als bei .wav: https://github.com/chris-rudmin/Recorderjs ).

Nun habe ich mir das Example angeschaut und bin soweit zufrieden. Allerdings möchte ich nun einen Upload Button einfügen - und hier habe ich ein Problem. Wenn man die Aufnahme stoppt werden die Daten verarbeitet und letztendlich gibt es einen Callback der den Blob enthält:

recorder.addEventListener( "dataAvailable", function(e){
            var fileName = new Date().toISOString() + "." + e.detail.type.split("/")[1];
            var url = URL.createObjectURL( e.detail );

            var audio = document.createElement('audio');
            audio.controls = true;
            audio.src = url;

            var link = document.createElement('a');
            link.href = url;
            link.download = fileName;
            link.innerHTML = link.download;

            var li = document.createElement('li');
            li.appendChild(link);
            li.appendChild(audio);

            recordingslist.appendChild(li);
            upload(e.detail);
        });

e.detail ist der Blob. Nachdem die Funktion durchgelaufen ist, wird die Audiodatei als audio Element auf der Webseite angezeigt und kann angehört werden. Zusätzlich gibt es eben die URL, die könnte z.B. so aussehen:
blob:http%3A//127.0.0.1%3A8000/5692d3f7-0319-4f61-b772-964ad76113c7

Meine Upload Function habe ich schon und diese funktioniert:

function upload(blob){
        var csrftoken = getCookie('csrftoken');

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload/', true);
        xhr.setRequestHeader("X-CSRFToken", csrftoken);

        xhr.send(blob);
    }

Das Problem ist nur, wenn jemand den Upload Link / Knopf drückt, habe ich nicht mehr den Blob! Ich habe probiert die URL an die Upload Funktion zu übergeben, aber dann kam am Server nur eine Text Datei an in der eben die URL steht und nicht der Inhalt der hinter der URL liegt. Wenn ich die Upload Function im callback direkt aufrufe mit upload(e.detail) dann funktioniert alles und die audio Datei liegt auf dem Server. Aber das wird eben aufgerufen sobald man Stop drückt und dadurch würde eben alles auf dem Server landen - nicht gut.

• Wie kann ich den blob der in e.detail steckt nun im Javascript Code irgendwo zwischenspeichern? Soll ich eine globale Liste anlegen in die ich die jedesmal ein push(e.detail) mache.
• Oder kann ich vielleicht doch die URL in der Upload Funktion wieder zu einem Blob bekommen?
• Oder sollte ich einen Button mit einem Eventlistener und Callback erstellen und dem direkt beim erzeugen schon den Blob übergeben und eben darauf warten dass jemand darauf klickt? Ich denke das wäre die sauberste Methode, nur kenne ich mich mit JS nicht so gut aus.