将音频从浏览器保存到后端（Django）答案

【问题标题】：Saving audio from the browser to the backend (Django)将音频从浏览器保存到后端（Django）
【发布时间】：2020-12-28 13:59:08
【问题描述】：

我经历了很多已经给出但不理解的答案。

任务：我必须从用户那里获取不到一分钟的音频，然后将其保存在后端并将其发送到 Google 的语音识别 API 以获取文本。

我尝试使用 MediaRecorder API 在浏览器中进行录制，方法是在此处使用此演示 https://mido22.github.io/MediaRecorder-sample/。

我想将录制的音频保存在我的 Django 后端中，以便我们对其进行一些后期处理。

编辑1： Github code for media recorder api

【问题讨论】：

您可能想查看github.com/areski/django-audiofield，因为我相信它可能适合您的用例。
不确定问题是什么？你有什么问题？
我想录制在浏览器中完成的音频，然后将该音频发送到我的后端，以便我可以保存该音频文件@guest271314
@indexOutOfBounds 是的，您在达到要求时遇到了哪些问题？您能否包括您在 Question 中尝试过的html、javascript？请参阅stackoverflow.com/help/how-to-ask、stackoverflow.com/help/mcve。 OP 上似乎没有提出实际问题？
您可以将生成的Blob : let blob = new Blob(chunks, {type: media.type }) makeLink 函数发布到服务器，或将blob 传递给FormData 实例并使用XMLHttpRequest() 将FormData 对象发布到服务器或fetch()

标签： javascript django audio blob mediarecorder

【解决方案1】：

POST 在makeLink 处生成的Blob 函数作为FormData 对象的属性提供给服务器

function makeLink() {
  let blob = new Blob(chunks, {type: media.type });
  let fd = new FormData;
  fd.append("audioRecording", blob);
  let request = new XMLHttpRequest();
  request.open("POST", "/path/to/server", true);
  request.onload = function() {
    // do stuff
  }
  request.onerror = function() {
   // handle error
  }
  request.send(fd);
}

function makeLink() {
  let blob = new Blob(chunks, {type: media.type });
  let fd = new FormData;
  fd.append("audioRecording", blob);
  fetch("/path/to/server", {method:"POST", body:fd})
  .then(response => response.ok)
  .then(res => console.log(res))
  .catch(err => console.error(err));
}

【讨论】：

我正在本地开发并使用 Django 框架在 python 中工作，那么我的服务器路径到底是什么？
“我正在本地开发”，“那么我的服务器路径到底是什么？”python 文件的路径位于您正在开发的本地服务器？
不，路径类似于“127.0.0.1:8000/formposturl”，其中 formposturl 在您的 urls.py 文件之一中定义，并指向可以处理发布数据的表单视图。这是相当基本的东西，请阅读表单上的 Django 文档。

【解决方案2】：

我在这里创建了一个简单的项目： https://github.com/Keramatfar/django_sound_file

对于后端，我使用以下函数：

def main(request):
        
    if request.method == "POST":
        audio_data = request.FILES.get('data')
        path = default_storage.save('file' + '.wav', ContentFile(audio_data.read()))
        return render(request, 'web-recorder.html')
    else:
        return render(request, 'web-recorder.html')

【讨论】：