Fix audio playback for newly uploaded files by using dynamic API route

app/admin/page.tsx

@@ -561,7 +561,7 @@ export default function AdminPage() {
             audioElement?.pause();
 
             // Play new song
-            const audio = new Audio(`/uploads/${song.filename}`);
+            const audio = new Audio(`/api/audio/${song.filename}`);
 
             // Handle playback errors
             audio.onerror = () => {

app/api/admin/daily-puzzles/route.ts

@@ -38,7 +38,7 @@ export async function GET() {
                 title: puzzle.song.title,
                 artist: puzzle.song.artist,
                 filename: puzzle.song.filename,
-                audioUrl: `/uploads/${puzzle.song.filename}`
+                audioUrl: `/api/audio/${puzzle.song.filename}`
             }
         }));
 

app/api/audio/[filename]/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile, stat } from 'fs/promises';
+import path from 'path';
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ filename: string }> }
+) {
+    try {
+        const { filename } = await params;
+        const filePath = path.join(process.cwd(), 'public/uploads', filename);
+
+        // Check if file exists
+        try {
+            await stat(filePath);
+        } catch {
+            return new NextResponse('File not found', { status: 404 });
+        }
+
+        // Read file
+        const fileBuffer = await readFile(filePath);
+
+        // Return with proper headers
+        return new NextResponse(fileBuffer, {
+            headers: {
+                'Content-Type': 'audio/mpeg',
+                'Accept-Ranges': 'bytes',
+                'Cache-Control': 'public, max-age=3600, must-revalidate',
+            },
+        });
+    } catch (error) {
+        console.error('Error serving audio file:', error);
+        return new NextResponse('Internal Server Error', { status: 500 });
+    }
+}

lib/dailyPuzzle.ts

@@ -98,7 +98,7 @@ export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
 
         return {
             id: dailyPuzzle.id,
-            audioUrl: `/uploads/${dailyPuzzle.song.filename}`,
+            audioUrl: `/api/audio/${dailyPuzzle.song.filename}`,
             songId: dailyPuzzle.songId,
             title: dailyPuzzle.song.title,
             artist: dailyPuzzle.song.artist,
@@ -185,7 +185,7 @@ export async function getOrCreateSpecialPuzzle(specialName: string) {
 
         return {
             id: dailyPuzzle.id,
-            audioUrl: `/uploads/${dailyPuzzle.song.filename}`,
+            audioUrl: `/api/audio/${dailyPuzzle.song.filename}`,
             songId: dailyPuzzle.songId,
             title: dailyPuzzle.song.title,
             artist: dailyPuzzle.song.artist,