从javascript录制和上传音频

Question

I am trying to record and upload audio from javascript. I can successfullly record audio Blob s from a MediaRecorder . My understanding is that after recording several chunks into blobs, I would concatenate them as a new Blob(audioBlobs) and upload that. Unfortunately, the result on the server-side keeps being more or less gibberish. I'm currently running a localhost connection, so converting to uncompressed WAV isn't a problem (might be come one later, but that's a separate issue). Here is what I have so far

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])
  }
})

The session object here is an autobahn.js websockets connection to a python server (using soundfile . I tried a number of arguments in the place that was labelled by XXXXX in the code.

1. Just pass the audioBlob . In that case, the python side just receives an empty dictionary.
2. Pass audioBlob.text() in that case, I get something that looks somewhat binary (starts with OggS), but it can't be decoded.
3. Pass audioBlob.arrayBuffer() . In that case the python side receives an empty dictionary.

A possible solution could be to convert the data to WAV on the serverside (just changing the mime-type on the blob doesn't work) or to find a way to interpret the .text() output on the server side.

Answer 1

解决方案是使用recorder.js ，然后使用那里的getBuffer方法将波形数据作为Float32Array 。