Mem Leak when playing a large number of files

[robotastic]

I am noticing the memory usage constantly growing when I playback a large number of files. I am using React and generally following this example: https://wavesurfer.xyz/examples/?react.js My code is up at: https://openmhz.com/system/dcfd but I made a small sandbox example to help simplify things.

When I run this in Chrome and use the Memory tools in Developer tools, I notice the memory usage constantly growing. I created a snapshot when I first load the page and then after playing through the files in the play list and I got the following:

Should I be doing something different to destroy the current audio buffer before I switch to a different URL? I have tried different backends and also useHook instead of Components and it didn't seem to help.

Thanks for any pointers - I am figuring I am doing something wrong

import WavesurferPlayer from '@wavesurfer/react'
import './App.css';
import { useState, useCallback } from 'react';

function App() {
  const [wavesurfer, setWavesurfer] = useState(null)
  const [isPlaying, setIsPlaying] = useState(false)
  const [urlIndex, setUrlIndex] = useState(0)
  const urls = [
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/2237/dcfd-2237-1727748294.m4a",
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/2327/dcfd-2327-1727748117.m4a",
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/700/dcfd-700-1727748073.m4a",
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/101/dcfd-101-1727748013.m4a",
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/1039/dcfd-1039-1727747512.m4a",
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/2237/dcfd-2237-1727747496.m4a",
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/700/dcfd-700-1727747387.m4a",
"https://s3.us-east-005.backblazeb2.com/openmhz-east/media/dcfd/700/dcfd-700-1727747198.m4a"
  ]

  const onReady = (ws) => {
    setWavesurfer(ws)
    setIsPlaying(false)
  }

  const onFinish = useCallback(() => {
    setUrlIndex((index) => (index + 1) % urls.length)
  }, [])



  const onPlayPause = () => {
    wavesurfer && wavesurfer.playPause()
  }

  return (
    <div className="App">

      <WavesurferPlayer
        height={100}
        waveColor="violet"
        url={urls[urlIndex]}
        onReady={onReady}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onFinish={onFinish}
      />
<button onClick={onFinish}>Next Clip</button>
      <button onClick={onPlayPause}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>

    </div>
  );
}

export default App;