Unga bunga

frontend/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+music/*

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;

frontend/src/screens/StationPage.jsx

@@ -1,6 +1,8 @@
 import { useParams } from "react-router-dom";
 import React, { useState, useEffect } from "react";
 import { addClientToStation } from "../utils/AddClientToStation";
+import { getAudioFiles } from "../utils/AudioFiles";
+import SingleAudioPlayer from "../components/AudioPlayer";
 
 function StationPage() {
   const { stationID } = useParams();
@@ -31,7 +33,7 @@ function StationPage() {
     );
   }
 
-  const recommendedSongs = [];
+  const recommendedSongs = getAudioFiles() ?? [];
 
   return (
     <div className="station-page">
@@ -46,6 +48,7 @@ function StationPage() {
           <h1>Serena Station</h1>
           <p className="station-subtitle">Collaborative Music Experience</p>
         </header>
+        <SingleAudioPlayer src={recommendedSongs[0]}></SingleAudioPlayer>
 
         <div className="songs-section">
           <div className="section-header">
@@ -58,15 +61,7 @@ function StationPage() {
                 <p>No songs in queue yet. Add some songs to get started!</p>
               </div>
             ) : (
-              recommendedSongs.map((song) => (
-                <div key={song.id} className="song-item">
-                  <div className="song-info">
-                    <h4>{song.title}</h4>
-                    <p>{song.artist}</p>
-                  </div>
-                  <span className="song-duration">{song.duration}</span>
-                </div>
-              ))
+              recommendedSongs.map((song) => <p>{song}</p>)
             )}
           </div>
         </div>

frontend/src/utils/AudioFiles.js

@@ -0,0 +1,5 @@
+const importAll = (r) => r.keys().map(r);
+
+export const getAudioFiles = () => {
+  return importAll(require.context("../../music", false, /\.(mp3|wav)$/));
+};