Загрузить данные с URL-адреса блоба

Question

Я создаю приложение, которое записывает звук с микрофона и дает возможность загрузить его на локальный диск. Вот фрагмент моего кода, который генерирует звуковую ссылку с отметкой времени.

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);

Как я могу изменить этот код, чтобы вместо создания ссылки он напрямую загружал файл в мою корневую папку.

Answer 1

Отправляет wav upstream, POST / upload, закодированный как base64, вместе с метаданными.Сервер должен будет декодировать data и сохранить его в файловой системе:

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);