I’m facing performance issues when using Wavesurfer.js with the RecordPlugin in my application based in Ionic/Angular when run on Android.

I’m dynamically creating and destroying multiple Wavesurfer instances to handle different audio files of an audio recorder. Each time I finish a recording, the component is destroyed and tested that ngOnDestroy is triggered. However, after creating and destroying several instances, I’ve noticed a significant performance degradation, and at some point the wavesurfer instance is not even playing.

I’ve tried the following approaches to optimize performance and handle errors:

• Thoroughly cleaning up Wavesurfer instances after destruction, including removing event listeners and DOM elements.
• Implementing error handling for Wavesurfer and RecordPlugin events.
  Despite these efforts, the performance issues persist.

Here’s a simplified code snippet illustrating my current implementation of creating/destroying:

  private createWaveSurferRecorder(): void {
    if(this.record) {
      this.record.unAll();
      this.record.destroy();
      this.record = null;
    }

    if (this.waveSurferRecorder) {
      this.waveSurferRecorder.getMediaElement().innerHTML = null;
      this.waveSurferRecorder.unAll();
      this.waveSurferRecorder.destroy();
      this.waveSurferRecorder = null;
    }

    this.record =
      RecordPlugin.create({
        scrollingWaveform: this.scrollingWaveForm,
        renderRecordedAudio: true
    });

    this.waveSurferRecorder = WaveSurfer.create({
      container: '#recorder',
      autoScroll: true,
      autoCenter: true,
      dragToSeek: true,
      fillParent: true,
      normalize: false,
      waveColor: 'rgba(56, 58, 62, 0.7)',
      progressColor: 'rgb(23, 92, 211)',
      cursorColor: 'rgb(233, 50, 54)',
      height: 40,
      cursorWidth: 5,
      barWidth: 2,
      barGap: 2,
      barRadius: 10,
      plugins: [
        this.record
      ]
    });

    this.record.on('record-end', (blob: Blob) => {
      if (this.dataAvailable$()) {
          this.destroyWaveSurfer();
          blob = null;
          this.onCompleteRecording.emit(blob);
        });
      }
    });
  };

  ngOnDestroy(): void {
    this.destroyWaveSurfer();
  }


  private destroyWaveSurfer(): void {
    if(this.record && this.record.isRecording()) {
      this.stopRecording();
    }

    if(this.record) {
      this.record.stopMic();
      this.record.unAll();
      this.record.destroy();
    }

    if(this.waveSurferRecorder) {
      this.waveSurferRecorder.unAll();
      this.waveSurferRecorder.destroy();
    }

    this.record = null;
    this.waveSurferRecorder = null;
  }

In my case the error occurs with the above code after the the tenth time the wavesurferRecorder is destroyed and re-instantiated.