Howler

package.json

@@ -28,6 +28,7 @@
     "@shelf/jest-mongodb": "^4.3.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
+    "@types/howler": "^2.2.12",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
     "@types/react": "^18",

src/app/audioplayer/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+import { useState, useRef } from "react";
+import Navbar from "@/components/Navbar";
+import AudioPlayer from "@/components/AudioPlayer";
+
+export default function Page() {
+  return (
+    <main>
+      <Navbar />
+      <h1 className="text-3xl font-bold underline">Hello world!</h1> {/* sample audio formatting */}
+      <AudioPlayer
+        audioURL="https://og83eubqb6o3yptf.public.blob.vercel-storage.com/Bill_Deneen_Kathleen_Final-KDIk27mD6mgRGoXc2MyH7NLrmvXFAR.wav"
+        name="Test Audio"
+      />
+    </main>
+  );
+}

src/app/page.tsx

@@ -1,10 +1,8 @@
 import Navbar from "@/components/Navbar";
-
 export default function Home() {
   return (
     <main>
       <Navbar />
-      <h1 className="text-3xl font-bold underline">Hello world!</h1>{" "}
     </main>
   );
 }

src/components/AudioPlayer.tsx

@@ -0,0 +1,87 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Howl } from "howler";
+
+interface AudioPlayerProps {
+  audioURL: string;
+  name: string;
+}
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioURL, name }) => {
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+  const soundRef = useRef<Howl | null>(null);
+
+  // Howl instance creation/update on audioURL change
+  useEffect(() => {
+    if (audioURL) {
+      if (soundRef.current) {
+        soundRef.current.unload();
+      }
+      soundRef.current = new Howl({
+        src: [audioURL],
+        html5: true,
+        onend: () => {
+          setIsPlaying(false);
+          setProgress(0);
+        },
+      });
+    }
+    return () => {
+      if (soundRef.current) {
+        soundRef.current.unload();
+      }
+    };
+  }, [audioURL]);
+
+  // To handle playing the audio
+  const handlePlay = () => {
+    if (soundRef.current) {
+      soundRef.current.play();
+      setIsPlaying(true);
+    }
+  };
+
+  // To handle pausing the audio.
+  const handlePause = () => {
+    if (soundRef.current) {
+      soundRef.current.pause();
+      setIsPlaying(false);
+    }
+  };
+
+  // Attempt to update progress bar
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout;
+    if (isPlaying && soundRef.current) {
+      intervalId = setInterval(() => {
+        if (!soundRef.current) return;
+        const currentTime = soundRef.current.seek() as number;
+        const duration = soundRef.current.duration();
+        if (duration > 0) {
+          setProgress((currentTime / duration) * 100);
+        }
+      }, 1000);
+    }
+    return () => clearInterval(intervalId);
+  }, [isPlaying]);
+
+  return (
+    <div className="audio-player">
+      <h3>{name}</h3>
+      <div>
+        <button onClick={handlePlay} disabled={isPlaying}>
+          Play
+        </button>
+        <button onClick={handlePause} disabled={!isPlaying}>
+          Pause
+        </button>
+      </div>
+      <div>
+        <progress value={progress} max="100" style={{ width: "100%" }} />
+      </div>
+    </div>
+  );
+};
+
+export default AudioPlayer;