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

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

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

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

---

如果文件真的很大，那么我建议您使用tus协议上传文件

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