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

Posted 2023-02-24

【中文标题】如何在给定 blob url 的情况下将大型音频文件上传到 django 服务器？

【英文标题】：How to upload large audio file to a django server given a blob url?

【发布时间】：2018-12-10 08:34:10

【问题描述】：

我有一个使用MediaRecorder 记录音频并将二进制数据推入数组chunk 的javascript。用户完成录制后，数据将转换为 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!');   

当前的设置是否适用于长达一小时的录制？如果有更好的方法在客户端录制音频并将其上传到服务器，我将不胜感激。

【问题讨论】：

我的意思是，如果您使用的是 Django Rest 框架，您可以将数据附加到帖子并使用特定的 URL 端点在后端捕获它。 Raw Django，您可能可以自己创建一个 URL 并将您的表单设置为自动发布。我对 Djang 表单系统了解得不够多，不知道您是否可以嵌入一个基于 JS 调用提交然后加载响应的表单。

这可能会有所帮助：simpleisbetterthancomplex.com/tutorial/2016/08/29/…

【参考方案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 protocol上传你的文件

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