Как загрузить большой аудиофайл на сервер Django с указанием URL-адреса BLOB-объекта?

Question

У меня есть JavaScript, который записывает аудио с использованием MediaRecorder и помещает двоичные данные в массив chunk. Как только пользователь заканчивает запись, данные преобразуются в blob и загружаются в элемент HTML audio для воспроизведения. Моя проблема сейчас пытается загрузить эти данные на сервер Django одновременно. В большинстве примеров загрузки сценариев, которые я видел, пользователи вручную загружали аудиофайл в элемент формы input и нажимали кнопку «Отправить», но мои данные уже загружены в BLOB-файл, поэтому я не уверен, что делать дальше.

HTML

<div id="buttons">
    <form>
        <button id="record_btn" style="">Record</button>
        <input id="stop_btn" type="submit" value="Stop" disabled>
        <audio id="audio" controls>
            <source id="source" src="" type="audio/ogg"/>
        </audio>
    </form>
</div> 

Javascript

var record = document.querySelector('#record_btn');   
var stop = document.querySelector('#stop_btn');

  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     console.log('getUserMedia supported.');
     navigator.mediaDevices.getUserMedia (
        // constraints - only audio needed for this app
        {
           audio: true
        })

        // Success callback
        .then(function(stream) {
          var mediaRecorder = new MediaRecorder(stream);
          record.onclick = function() {
            mediaRecorder.start();
            record.disabled = true;
            stop.disabled = false;
            console.log(mediaRecorder.state);
            console.log("recorder started");
            record.style.background = "red";
            record.style.color = "black";
          }

          var chunks = [];

          mediaRecorder.ondataavailable = function(e) {
            chunks.push(e.data);
          }
          stop.onclick = function() {
            mediaRecorder.stop();
            record.disabled = false;
            stop.disabled = true;
            console.log(mediaRecorder.state);
            console.log("recorder stopped");
            record.style.background = "";
            record.style.color = "";
          }

          mediaRecorder.onstop = function(e) {
            console.log("recorder stopped");
            var audio = document.querySelector('#audio');
            var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
            chunks = [];
            var audioURL = window.URL.createObjectURL(blob);
            $("#source").attr("src", audioURL);
            $("#audio")[0].load();
            stream.getTracks()[0].stop();

            //CODE TO UPLOAD BLOB DATA TO DJANGO SERVER
            ????????? 
            //
          }
        })

        // Error callback
        .catch(function(err) {
           console.log('The following getUserMedia error occured: ' + err);
        }
     );   } else {
     console.log('getUserMedia not supported on your browser!');   }

Будет ли текущая настройка работать хорошо для записи в течение часа? Если есть какой-либо лучший способ записи аудио на стороне клиента и загрузки его на сервер, я был бы очень признателен за любые рекомендации.

Answer 1

Вы можете использовать JQuery Ajax для отправки данных BLOB-объектов на сервер Django

var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });

console.log("start sending binary data...");
var form = new FormData();
form.append('audio', blob);

$.ajax({
    url: 'http://localhost:8000/<your api endpoint>/',
    type: 'POST',
    data: form,
    processData: false,
    contentType: false,
    success: function (data) {
        console.log('response' + JSON.stringify(data));
    },
    error: function () {
       // handle error case here
    }
});

А в представлении Django вы можете легко получить блоб, используя

audio_data = request.FILES['audio']
# you can directly assign audio_data to FileField model attribute

Примечание: Приведенный выше код будет работать нормально, если данные не настолько велики, что превышает время ожидания вашего сервера

---

Если файл действительно большой, я рекомендую вам загрузить его, используя tus protocol

Этот подход предлагает вам загружать большой файл кусками. Для проекта Django вы можете использовать пакет django-tus .