Unga bunga

frontend/src/components/AudioPlayer.jsx

@@ -0,0 +1,35 @@
+import React, { useRef, useState } from "react";
+
+const SingleAudioPlayer = ({ src }) => {
+  const audioRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const togglePlay = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play().catch((e) => {
+        console.warn("Playback error:", e);
+      });
+    }
+
+    setIsPlaying(!isPlaying);
+  };
+
+  const handleEnded = () => {
+    setIsPlaying(false);
+  };
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+      <button onClick={togglePlay}>{isPlaying ? "Pause" : "Play"}</button>
+      <span>{src.split("/").pop()}</span>
+      <audio ref={audioRef} src={src} onEnded={handleEnded} />
+    </div>
+  );
+};
+
+export default SingleAudioPlayer;