Created a waveform component to display the recording's waveform

src/components/Waveform.tsx

@@ -0,0 +1,56 @@
+import React, {useEffect, useRef} from "react";
+import WaveSurfer from "wavesurfer.js";
+
+interface Props {
+	audio: string;
+	isPlaying: boolean;
+	onEnd: () => void;
+}
+
+const Waveform = ({audio, isPlaying, onEnd}: Props) => {
+	const containerRef = useRef(null);
+	const waveSurferRef = useRef<WaveSurfer | null>(null);
+
+	useEffect(() => {
+		const waveSurfer = WaveSurfer.create({
+			container: containerRef?.current || "",
+			responsive: true,
+			cursorWidth: 0,
+			height: 24,
+			waveColor: "#FCDDEC",
+			progressColor: "#EF5DA8",
+			barGap: 4,
+			barWidth: 4,
+			barRadius: 2,
+			fillParent: true,
+			hideScrollbar: true,
+			normalize: true,
+		});
+		waveSurfer.load(audio);
+		waveSurfer.on("ready", () => {
+			waveSurferRef.current = waveSurfer;
+		});
+		waveSurfer.on("finish", onEnd);
+
+		return () => {
+			waveSurfer.destroy();
+		};
+	}, [audio, onEnd]);
+
+	useEffect(() => {
+		if (isPlaying) waveSurferRef.current?.play();
+		if (!isPlaying) waveSurferRef.current?.pause();
+	}, [isPlaying]);
+
+	return (
+		<>
+			<button onClick={() => waveSurferRef.current?.playPause()} type="button">
+				{" "}
+				play/pause{" "}
+			</button>
+			<div className="w-full h-fit" ref={containerRef} />
+		</>
+	);
+};
+
+export default Waveform;