RangeError new ArrayBuffer Array buffer allocation failed

[kumarajay0412]

This is the implementation of wavesurfer with RecordPlugin getting error a lot of time Array buffer allocation failed and i am not able to resolve this can anyone help me here

import WaveSurfer, { type WaveSurferOptions } from 'wavesurfer.js';
import RecordPlugin from 'wavesurfer.js/dist/plugins/record.esm.js';

export const useWaveSurfer = (containerRef: MutableRefObject<HTMLDivElement | null>, options: Partial<WaveSurferOptions>) => {
  const waveSurfer = useRef<WaveSurfer | null>(null);
  const mediaRecorder = useRef<RecordPlugin | null>(null);

  const createWaveSurfer = () => {
    try {
      if (waveSurfer.current) {
        waveSurfer.current.destroy();
        mediaRecorder.current?.destroy();
      }
      waveSurfer.current = WaveSurfer.create({ container: containerRef.current!, ...options });
      mediaRecorder.current = waveSurfer.current.registerPlugin(RecordPlugin.create({ renderRecordedAudio: false, scrollingWaveform: true }));
    } catch (e) {
      console.error(e);
      if (!waveSurfer.current) return;
      mediaRecorder.current?.destroy();
      waveSurfer.current.destroy();
      waveSurfer.current = null;
    }
  };

  return { waveSurfer, mediaRecorder, createWaveSurfer };
};

[katspaugh]

Looks like a bug in your app. Please don’t file it as a wavesurfer bug. From the snippet shown I can’t tell what the problem is.

[kumarajay0412]

so when i tried to resolve this error is coming from this file from line number 137
this line

tempArray.set(this.dataWindow.slice(-newLength + bufferLength), startIdx)

const drawWaveform = () => {
  if (this.isWaveformPaused) return

  analyser.getFloatTimeDomainData(dataArray)

  if (this.options.scrollingWaveform) {
    // Scrolling waveform
    const windowSize = Math.floor((this.options.scrollingWaveformWindow || 0) * audioContext.sampleRate)
    const newLength = Math.min(windowSize, this.dataWindow ? this.dataWindow.length + bufferLength : bufferLength)
    const tempArray = new Float32Array(windowSize) // Always make it the size of the window, filling with zeros by default

    if (this.dataWindow) {
      const startIdx = Math.max(0, windowSize - this.dataWindow.length)
      tempArray.set(this.dataWindow.slice(-newLength + bufferLength), startIdx)
    }

    tempArray.set(dataArray, windowSize - bufferLength)
    this.dataWindow = tempArray
  } 

https://github.com/katspaugh/wavesurfer.js/blob/main/src/plugins/record.ts

only solution i was able to find was delete last half of dataWindow in every 30 seconds to prevent the error

[katspaugh]

Copilot says:

To address the off-by-N error in the buffer slicing code, you can adjust the slicing and setting logic for tempArray:

1. Ensure the length of the sliced portion matches the space available in tempArray.
2. Adjust startIdx and the length of the slice to fit within tempArray.

Here is a potential fix for your code:

const drawWaveform = () => {
  if (this.isWaveformPaused) return;

  analyser.getFloatTimeDomainData(dataArray);

  if (this.options.scrollingWaveform) {
    const windowSize = Math.floor((this.options.scrollingWaveformWindow || 0) * audioContext.sampleRate);
    const newLength = Math.min(windowSize, this.dataWindow ? this.dataWindow.length + bufferLength : bufferLength);
    const tempArray = new Float32Array(windowSize); // Always make it the size of the window, filling with zeros by default

    if (this.dataWindow) {
      const startIdx = Math.max(0, windowSize - this.dataWindow.length);
      const sliceLength = Math.min(this.dataWindow.length, newLength - bufferLength);
      tempArray.set(this.dataWindow.slice(-sliceLength), startIdx);
    }

    tempArray.set(dataArray, windowSize - bufferLength);
    this.dataWindow = tempArray;
  }
};

This adjustment ensures that the slice length is correctly calculated to fit within tempArray. If you need further assistance, let me know!