如何在javascript中使用audioWorklet和AudioWorkletProcessor录制音频？

Question

I have below logic to record (set samplerate = 16000 in AudioContext, mono channel recording by considering only one channel)

1. I set a parameter shouldRecord from AudioWorklet, and depending on that AudioWorkletProcessor will start putting data into buffer as below

  process(inputs, outputs, parameters) {
    const isRecordingValues = parameters.isRecording;
    //taking first input
    var input0 = inputs[0];
    var inputChannel = input0[0];
    if (isRecordingValues.length ===1){
      const shouldRecord = isRecordingValues[0] === 1;
      if (!shouldRecord && !this._isBufferEmpty()) {

        this._flush();
        this._recordingStopped();
      }

      if (shouldRecord) {
            this._appendToBuffer(inputChannel);
      }

    }
    return true;
  }

}

_appendToBuffer is as below:

  _appendToBuffer(value) {
    if (this._isBufferFull()) {
      this._flush();
    }

    // Here _buffer is of type Float32Array 
    this._buffer.set(value, this._bytesWritten);
    this._bytesWritten += value.length;
  }

2. In _flush method i am sending the contents of _buffer to AudioWorklet as below:

    var blob = this._exportWAV(buffer, this._bytesWritten);
    this.port.postMessage({
      eventType: 'data',
      audioBuffer: blob 
    });

Here buffer contains values between -1.0 to 1.0 .

3. I receive the data in AudioWorklet as ArrayBuffer object and i download it as Wave file. Irrespective of the size of the file i can open the file in Windows Media Player without error but it lasts less than a second and playback ends.

I believe i am doing something wrong in the process method and the data recorded in buffer is not in correct format.

What am i doing wrong here?

Answer 1

I changed the _flush method as follows:

_flush() {

  let buffer = this._buffer;
  if (this._bytesWritten < this._bufferSize) {
    buffer = buffer.slice(0, this._bytesWritten);
  }
  this.port.postMessage({
    eventType: 'data',
    audioBuffer: buffer
  });

  this._initBuffer();}

so i am directly sending my buffer to AudioWorklet. when i receive this buffer in AudioWorklet I am sending it as Blob to Flask app as below

const audioData = e.data.audioBuffer.buffer;
socket.emit( 'my event', {
   blob : new Blob([audioData], { type: 'audio/wav' })
});

this gives me plain simple floating point numbers between -1.0 to 1.0 to work with in Flask app. I am then converting these floating points with below function

def convert(raw_floats):
   data = raw_floats
   floats = array.array('f', data)
   samples = [int(sample * 32767)
           for sample in floats]
   raw_ints = struct.pack("<%dh" % len(samples), *samples)
   return raw_ints

I am saving these raw_ints to WAVE file, which is playable in Windows Media Player.