如何将大型音频文件上传到给定 blob url 的 django 服务器？

Question

我有一个 javascript，可以使用 记录音频MediaRecorder并将二进制数据推送到数组中chunk。用户完成录制后，数据将转换为blob并加载到 HTMLaudio元素中进行播放。我现在的问题是尝试同时将此数据加载到 Django 服务器上。我见过的大多数示例上传脚本都让用户手动将音频文件加载到表单元素中input并手动单击提交按钮，但我的数据已经加载到 blob 文件中，因此我不确定如何继续。

超文本标记语言

<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 视图中，您可以使用以下命令轻松检索 blob

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

注意：如果数据不是那么大，超过了服务器超时，上面的代码将正常工作

如果文件非常大，那么我建议您使用tus 协议上传文件

这种方法允许您分块上传大文件。对于 Django 项目，您可以使用django-tus包。