javascript - 如何将音频 Blob 传递到 Django 后端和服务器？

Question

我正在构建一个 Django WebApp，它可以录制多个发言者、操作文件并将结果推送到 IBM 语音处理工具。我在录音部分被困了两天，希望得到一些帮助。

我的目标是能够将 .wav 文件存储在我的数据库中，我可以操作这些文件并将其发送到 IBM 工具。

在JS中，这就是我找到如何录制音频的方法。

    function handlerFunction(stream) {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
          audioChunks.push(e.data);
          if (rec.state == "inactive"){
            let blob = new Blob(audioChunks,{type:'audio/wav'});
            recordedAudio.src = URL.createObjectURL(blob);
            recordedAudio.controls=true;
            recordedAudio.autoplay=true;
            sendData(blob)
          }
        }
      }

    function sendData(data) {
      $('.passAudio').val(data);
    }

我可以在音频标签中重播它，并且我正在尝试将其作为隐藏输入传递。到目前为止，它告诉我它传递了一个 Blob 对象，但我不知道如何处理它。

<audio id=recordedAudio></audio>
<input type="hidden" accept="audio/*" id="0" name="audio" class="passAudio">

我试图让它以某种方式存储在我的默认存储中，但我不知道这是否是正确的方向。我也不确定如何检查它是否已正确保存。

# views.py
if request.method == 'POST':
    blob = request.POST.getlist('audio')
    path = default_storage.save('audio/'+'123'+'.wav', ContentFile(blob.read()))
    default_storage.size(path)
    default_storage.open(path).read()

我确信其中很多都是错误的，因为我不明白如何将文件(或 blob)从 JS 传递到 python 并存储它。

我的问题是

1. 如何将 blob 转换为可以传递给 python 的文件？

2. 如何检查它是否已正确存储？

Answer 1

通过 javascript 函数，您可以使用 ajax 将音频 blob 发送到服务器。

function sendData(data) 
    {
    let csrftoken = getCookie('csrftoken');
    let response=fetch("/voice_request", {
    method: "post",
    body: data,
    headers: { "X-CSRFToken": csrftoken },
    })
   }

服务器端:

 def voice_request(request):
        print(request.body)
        f = open('./file.wav', 'wb')
        f.write(request.body)
        f.close()
        return HttpResponse('audio received')

获取 cscrf token :

function getCookie(name) {
      var cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          var cookies = document.cookie.split(';');
          for (var i = 0; i < cookies.length; i++) {
              var cookie = cookies[i].trim();
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }

引用:https://docs.djangoproject.com/en/dev/ref/csrf/#ajax