从Blob网址下载数据

Question

I am creating an application that records audio from mic and gives an option to download it to the local drive. here is a piece of my code that generates an audio link with a timestamp.

stopRecording(function(AudioBLOB){

                var url = URL.createObjectURL(AudioBLOB);
                var li = document.createElement('li');
                var au = document.createElement('audio');
                var hf = document.createElement('a');

                au.controls = true;
                au.src = url;
                hf.href = url;
                // Important:
                // Change the format of the file according to the mimetype

                hf.download = new Date().toISOString() + '.wav';
                hf.innerHTML = hf.download;
                li.appendChild(au);
                li.appendChild(hf);
                recordingslist.appendChild(li);
}, _AudioFormat);
            }, false);

How can I modify this code so instead of creating the link it would directly upload the file to my root folder.

Answer 1

This sends the wav upstream, POST /upload, encoded as base64, along with metadata. The server will have to decode data and save it to the file-system:

class Audio {
    static createPayload(audioBlob) {
        return new Promise(function (resolve, reject) {
            const r = new FileReader();
            r.readAsDataURL(audioBlob);
            r.onloadend = function () {
                resolve(JSON.stringify({
                    filename: `${new Date().toISOString()}.wav`,
                    mimeType: 'audio/wav',
                    transferEncoding: 'base64',
                    data: r.result
                }));
            };
        });
    }
}

stopRecording(async function (audioBlob) {
    const payload = await Audio.createPayload(audioBlob);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(payload);
}, false);