Global player bug #3523
Unanswered
noahcousins
asked this question in
Q&A
Replies: 1 comment
-
I can’t say what’s wrong with your code without debugging your app. Try following this example more closely: https://wavesurfer.xyz/examples/?react-global-player.js |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey everybody,
My team and I have been working on a global audio player using Wavesurfer in Next.js. We've just about finished it, but are stuck on a bug.
For example, lets say we have two sound IDs, (id-1, and id-2). When id-1 is played, the global wave player reflects the media element correctly. When id-2 is played, it correctly displays the new media element and peaks. However, when playing id-1 again after changing to id-2, the id-1 waveform is not displayed, and the sound doesn't play (including on the original Wavesurfer component the media element & peaks are derived from).
To troubleshoot, we've tried to use the empty method. We've also tried using a unique ID with the peaks as a string.
I'm sure there is a very simple fix we're missing. If anyone could assist, it would be greatly appreciated! Code below:
import { useEffect, useRef } from "react";
import WaveSurfer from "wavesurfer.js";
export default function GlobalWavePlayer({ paused, media }) {
const wavesurferRef = useRef(null);
const { media: audio, peaks } = media;
const id = "global";
const destroyWaveSurfer = () => {
if (wavesurferRef.current) {
wavesurferRef.current.destroy();
wavesurferRef.current = null;
}
};
useEffect(() => {
destroyWaveSurfer();
}, [audio]);
useEffect(() => {
if (wavesurferRef.current) {
if (paused) {
wavesurferRef.current.finish();
} else {
wavesurferRef.current.play();
}
}
}, [paused]);
return (
);
}
Beta Was this translation helpful? Give feedback.
All reactions