Waveform not rendering - Audio still plays

[LouMM]

I have the same issue. I am using React.js server-side rendering for mine. I see the audio file retrieved, and I can play the audio just fine, but the waveform and the progress are not rendering as the color defined for them.

Originally posted by @LouMM in #3957 (comment)

typescriptuseEffect(() => {
// Only create WaveSurfer on the client side (avoid SSR issues)
if (typeof window !== "undefined" && waveformRef.current) {
waveSurfer.current = WaveSurfer.create({
container: waveformRef.current,
height: 100,
waveColor: "rgb(200, 0, 200)",
progressColor: "rgb(13, 226, 63)",
url: audioUrl,
fetchParams: { mode: "no-cors" },
});
waveSurfer.current.on("ready", () => {
console.log("WaveSurfer is ready");
});
}
// Cleanup on unmount
return () => {
if (waveSurfer.current) {
waveSurfer.current.destroy();
}
};
}, [audioUrl]);

const handlePlayPause = () => {
if (!waveSurfer.current) return;

waveSurfer.current.playPause();
setIsPlaying((prev) => !prev);

};

return (

{/* Optional Title */}
{title && (
<Typography variant={isMobile ? "h6" : "h5"} sx={{ mb: 1 }}>
{title}

)}

  {/* Waveform Container */}
  <Box
    ref={waveformRef}
    sx={{
      width: "100%",
      maxWidth: "100%",
      minHeight: 80,
    }}
  />

  {/* Controls */}
  <ControlsContainer>
    <Button
      color="primary"
      onClick={handlePlayPause}
      size="large"
      aria-label="Play/Pause"
    >
      {isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
    </Button>
    <Typography variant="body1">
      {isPlaying ? "Playing" : "Paused"}
    </Typography>
  </ControlsContainer>
</PlayerContainer>

);
};`

[katspaugh]

Please don't create issues especially given that there's already an open discussion.

Most likely the audio fails to decode. You can subscribe to the error event and see what it says.

[LouMM]

Wow @katspaugh , pretty grumpy. Not sure that is how you keep people using your components. I wrote my own instead. Thanks anyway.

[katspaugh]

Sorry, didn’t mean to offend. I’m trying to keep issues as an actionable backlog and do triaging in the forum first. Glad you found a way.