Record audio without relying on Mediarecorder

Question

Record audio without relying on Mediarecorder

I am combining two AudioBuffers to form a single one.
I believe this can be done without using the MediaRecorder, as real-time recording is not required.

This is my current approach:

concatenateAudio(buffers: AudioBuffer[]): void {
    const totalLength = buffers.reduce((acc, buffer) => acc + buffer.length, 0);
    const audioContext = new AudioContext();
    const audioBuffer = audioContext.createBuffer(1, totalLength, 48000);
    const source = audioContext.createBufferSource();
    const destination = audioContext.createMediaStreamDestination();

    let offset = 0;
    buffers.map((buffer) => {
        audioBuffer.getChannelData(0).set(buffer.getChannelData(0), offset);
        offset += buffer.length;
    });

    source.buffer = audioBuffer;
    source.connect(destination);
    source.start();

    this.saveRecordedAudio(destination.stream, audioBuffer.duration);
}

In the saveRecordedAudio() function, I pass the stream to a MediaRecorder.

The time taken to record the new stream is equivalent to the duration of playing the two AudioBuffers sequentially...
Is there an alternative method for accomplishing this?

Appreciate any suggestions. Thank you.

javascript angular typescript electron

Answer 1

Answer №1

If you're feeling adventurous, there's a unique method to capture buffers simultaneously and link them up like pieces of a puzzle. By dividing the audio buffer into various chunks within the minimum chunk length limit, it is possible to execute this process in Chrome but not in FF.

However, caution must be exercised when employing this technique under any circumstances. (Taken from gist).

// attempting to split buffer to N parts, record concurrently, and generate blob
async function recordParallel() {
  const audioContext = new AudioContext();

  const bufs = [], all = []
  for (let i = 0; i < 10; i++ ) {
    // 2705 - min chunk length for opus encoder in Chrome, so we increase block size to 4096 plus silent header
    let buf = new AudioBuffer({length: 4096, sampleRate: audioContext.sampleRate})
    bufs.push(buf)
    let data = buf.getChannelData(0)
    for (let j = 0; j < 4096; j++) data[j] = Math.sin(j / ((i + 1) * 2))

    // create recorders
    const source = audioContext.createBufferSource();
    source.buffer = buf;

    const chunks = []
    all.push(new Promise(r => {
      const dest = audioContext.createMediaStreamDestination();
      const recorder = new MediaRecorder(dest.stream);
      source.connect(dest)

      recorder.start(10)
      // delay is needed to shift encodingblocks
      source.start(0)

      recorder.ondataavailable = (e) => {
        const blob = e.data
        if (blob.size) chunks.push(blob)
      }
      recorder.onstop = e => {
        r(chunks)
      }
      source.onended = e => {
        recorder.stop()
      }
    }))
  }

  const blobs = await Promise.all(all);

  // combine multiple recorders back
  console.log(blobs)
  var blob = new Blob([...blobs[0], ...blobs.slice(1).map(b => b.slice(1)).flat()], { 'type' : 'audio/ogg; codecs=opus' });
  let audio = document.createElement('audio')
  audio.src = URL.createObjectURL(blob);
  audio.play()
}

Answer 2

If you're feeling adventurous, there's a unique method to capture buffers simultaneously and link them up like pieces of a puzzle. By dividing the audio buffer into various chunks within the minimum chunk length limit, it is possible to execute this process in Chrome but not in FF.

However, caution must be exercised when employing this technique under any circumstances. (Taken from gist).

// attempting to split buffer to N parts, record concurrently, and generate blob
async function recordParallel() {
  const audioContext = new AudioContext();

  const bufs = [], all = []
  for (let i = 0; i < 10; i++ ) {
    // 2705 - min chunk length for opus encoder in Chrome, so we increase block size to 4096 plus silent header
    let buf = new AudioBuffer({length: 4096, sampleRate: audioContext.sampleRate})
    bufs.push(buf)
    let data = buf.getChannelData(0)
    for (let j = 0; j < 4096; j++) data[j] = Math.sin(j / ((i + 1) * 2))

    // create recorders
    const source = audioContext.createBufferSource();
    source.buffer = buf;

    const chunks = []
    all.push(new Promise(r => {
      const dest = audioContext.createMediaStreamDestination();
      const recorder = new MediaRecorder(dest.stream);
      source.connect(dest)

      recorder.start(10)
      // delay is needed to shift encodingblocks
      source.start(0)

      recorder.ondataavailable = (e) => {
        const blob = e.data
        if (blob.size) chunks.push(blob)
      }
      recorder.onstop = e => {
        r(chunks)
      }
      source.onended = e => {
        recorder.stop()
      }
    }))
  }

  const blobs = await Promise.all(all);

  // combine multiple recorders back
  console.log(blobs)
  var blob = new Blob([...blobs[0], ...blobs.slice(1).map(b => b.slice(1)).flat()], { 'type' : 'audio/ogg; codecs=opus' });
  let audio = document.createElement('audio')
  audio.src = URL.createObjectURL(blob);
  audio.play()
}

Record audio without relying on Mediarecorder

Answer №1

Similar questions

Transform the Node.js requests for both GET and POST methods to utilize Ajax

Access numerical values from JSON objects using JavaScript

Encountering a hiccup while trying to install Svelte, Skeleton, and Tail

The compiler error TS2304 is indicating that it cannot locate the declaration for the term 'OnInit'

Vue in d3 - the property ownerDocument is not defined

When attempting to use $.ajax to send JSON, it instead sends a query string

Failed Axios POST request on iOS devices

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Continuously performing a task in Node.js every 2 minutes until a JSON file, which is being monitored for changes every few seconds

React-select fails to trigger form submission when the Enter key is pressed

Error in AJAX transmission

What could be causing the variable to be undefined in the template?

Tips for navigating through the search results on Google Maps with Selenium

The value of req.session.returnTo is not defined

Navigating through the world of WebSQL data entry

Ensure that the form is submitted only after confirming it in the modal with react-hook-form

"Encountering an error stating 'SyntaxError: Unable to use import statement outside of a module' when attempting to import a module that itself imports another module for side

Why is the return type for the always true conditional not passing the type check in this scenario?

Save information on the server and organize it into an array for use in local operations

Using NodeJS to assign key-value pairs to a JSON object