Hi, I got the same error. did you got any solution?

I found the solution by luck

set backgroundColor="black"
to see the visualizer you have to tweek the classnames to adapt to your app

@Twathik Thank you for your help, you saved me from looking for a different plugin. But none of it is as good as this.

you are welcome

I have fought with this issue all day today and finally found an external fix and a suggestion for improving the library, @YZarytskyi. Please let me know how I can contribute, as this library is amazing, and this small enhancement would make it even better.

Issue and suggested fix in the library

The canvas dimensions are being set before the component is fully rendered, leading to potential zero-width scenarios. This occurs in VoiceVisualizer.tsx#L168:

useEffect(() => {
  onResize();  // Executes before proper layout

...

}, [width, isAvailableRecordedAudio]);

Proposed Solution

Replace the current resize handling with ResizeObserver for more reliable dimension management:

// Use useLayoutEffect for initial dimensions
useLayoutEffect(() => {
  if (!canvasContainerRef.current) return;
  
  const resizeObserver = new ResizeObserver(() => {
    onResize();
  });
  
  resizeObserver.observe(canvasContainerRef.current);
  
  return () => resizeObserver.disconnect();
}, []);

Benefits:

• Reliable initial dimensions
• Automatic response to size changes
• Clean teardown
• Better performance than window resize events

Current Workaround (what I am using right now)

Until this is implemented, users can wrap the component with this solution:

import { PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';

export default function ComponentReadyWrapper({ children }: PropsWithChildren) {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  const wrapperRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    if (!wrapperRef.current) return;

    const resizeObserver = new ResizeObserver(() => {
      if (wrapperRef.current) {
        setDimensions({
          width: wrapperRef.current.clientWidth,
          height: wrapperRef.current.clientHeight
        });
      }
    });

    resizeObserver.observe(wrapperRef.current);
    return () => resizeObserver.disconnect();
  }, []);

  return (
    <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>
      {dimensions.width > 0 && children}
    </div>
  );
}

Usage example:

<ComponentReadyWrapper>
            <VoiceVisualizer
              controls={recorderControls}
              height="194px"
              isDefaultUIShown={false}
              isControlPanelShown={isVnMode}
              mainBarColor="#669eff"
              secondaryBarColor="#ffd534"
            />
</ComponentReadyWrapper>

Would you be interested in a pull request implementing this change?

Hello, yes sure, you can contribute, I appreciate it

Done: #31