从javascript录制和上传音频

编程问答 2022-06-03

问题描述

我正在尝试录制并从javascript上传音频。我可以从Blob成功录制音频MediaRecorder。我的理解是，在将多个块记录到Blob中之后，我会将它们串联为new Blob(audioBlobs)并上传。不幸的是，服务器端的结果或多或少变得乱七八糟。我当前正在运行localhost连接，因此转换为未压缩的WAV并不是问题（可能稍后再发布，但这是一个单独的问题）。这是我到目前为止所拥有的

navigator.mediaDevices.getUserMedia({audio: true,video: false})
.then(stream => {
  const mediaRecorder = new MediaRecorder(stream);
  mediaRecorder.start(1000);
  const audioChunks = [];

  mediaRecorder.addEventListener("dataavailable",event => {
    audioChunks.push(event.data);
  });
  
  function sendData () {
    const audioBlob = new Blob(audioChunks);
    session.call('my.app.method',[XXXXXX see below XXXXXX])
  }
})

这里的session对象是到Python服务器的autobahn.js Websockets连接（使用soundfile。我在由XXXXX标记的位置尝试了许多参数在代码中。

  1. 只需传递audioBlob。在这种情况下，python端只会收到一个空字典。
  2. 在这种情况下，通过audioBlob.text()，我得到的东西看上去有些二进制（以OggS开头），但是无法解码。
  3. 通过audioBlob.arrayBuffer()。在这种情况下，Python端会收到一个空字典。

一个可能的解决方案是在服务器端将数据转换为WAV（仅更改b​​lob上的mime类型不起作用）或找到一种方法来解释服务器端的.text()输出

解决方法

解决方案是使用recorder.js，然后在其中使用getBuffer方法将波浪数据作为Float32Array。

audioaudiojavascriptpysoundfileweb-mediarecorder