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;

src/pages/test.tsx

@@ -8,9 +8,10 @@ import {sessionOptions} from "@/lib/session";
 import useUser from "@/hooks/useUser";
 import Sidebar from "@/components/Sidebar";
 import dynamic from "next/dynamic";
-import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs";
+import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPauseFill, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs";
 import {useEffect, useState} from "react";
 
+const Waveform = dynamic(() => import("../components/Waveform"), {ssr: false});
 const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
 	ssr: false,
 });
@@ -38,6 +39,7 @@ export default function Page() {
 	const {user} = useUser({redirectTo: "/login"});
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
+	const [isPlaying, setIsPlaying] = useState(false);
 
 	useEffect(() => {
 		let recordingInterval: NodeJS.Timer | undefined = undefined;
@@ -78,7 +80,7 @@ export default function Page() {
 										<div className="flex gap-8 items-center justify-center py-8">
 											{status === "idle" && (
 												<>
-													{!mediaBlobUrl && <div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />}
+													<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
 													{status === "idle" && (
 														<BsMicFill
 															onClick={() => {
@@ -155,10 +157,21 @@ export default function Page() {
 													</div>
 												</>
 											)}
-											{status === "stopped" && (
+											{status === "stopped" && mediaBlobUrl && (
 												<>
-													<BsPlayFill className="text-mti-gray-cool cursor-pointer w-5 h-5" />
-													<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+													{isPlaying && (
+														<BsPauseFill
+															className="text-mti-gray-cool cursor-pointer w-5 h-5"
+															onClick={() => setIsPlaying(false)}
+														/>
+													)}
+													{!isPlaying && (
+														<BsPlayFill
+															className="text-mti-gray-cool cursor-pointer w-5 h-5"
+															onClick={() => setIsPlaying(true)}
+														/>
+													)}
+													<Waveform audio={mediaBlobUrl} isPlaying={isPlaying} onEnd={() => setIsPlaying(false)} />
 													<div className="flex gap-4 items-center">
 														<BsTrashFill
 															className="text-mti-gray-cool cursor-pointer w-5 h-5"