feat: audio playback working with bugs

frontend/src/api.js

@@ -137,6 +137,10 @@ class ApiClient {
     return this.request(`/posts/${postId}/metadata`);
   }
 
+  async getAudioUrl(postId, expiresIn = 3600) {
+    return this.request(`/posts/${postId}/audio?expires_in=${expiresIn}`);
+  }
+
   // ==================== Post Files ====================
 
   async getPostFiles(postId) {

frontend/src/components/AudioPostCard.jsx

@@ -12,6 +12,13 @@ export default function AudioPostCard({ post }) {
   const [transcriptExpanded, setTranscriptExpanded] = useState(false)
   const audioRef = useRef(null)
 
+  // DEBUG: Log post data to console
+  useEffect(() => {
+    console.log('Post data:', post)
+    console.log('Audio URL:', post.audio_url)
+    console.log('Status:', post.status)
+  }, [post])
+
   const formatDate = (dateString) => {
     const date = new Date(dateString)
     const now = new Date()
@@ -35,7 +42,14 @@ export default function AudioPostCard({ post }) {
     if (post.status === 'ready' && !transcript && !loadingTranscript) {
       loadTranscript()
     }
-  }, [post.post_id, post.status])
+    
+    // Set audio source if available
+    if (post.audio_url && audioRef.current) {
+      console.log('Setting audio src to:', post.audio_url)
+      audioRef.current.src = post.audio_url
+      audioRef.current.load() // Force reload
+    }
+  }, [post.post_id, post.status, post.audio_url])
 
   const loadTranscript = async () => {
     setLoadingTranscript(true)
@@ -78,10 +92,16 @@ export default function AudioPostCard({ post }) {
 
   const handleLoadedMetadata = () => {
     if (audioRef.current) {
+      console.log('Audio metadata loaded, duration:', audioRef.current.duration)
       setDuration(audioRef.current.duration)
     }
   }
 
+  const handleAudioError = (e) => {
+    console.error('Audio error:', e)
+    console.error('Audio element error:', audioRef.current?.error)
+  }
+
   const handleSeek = (e) => {
     const rect = e.currentTarget.getBoundingClientRect()
     const x = e.clientX - rect.left
@@ -155,11 +175,13 @@ export default function AudioPostCard({ post }) {
               {/* Hidden audio element */}
               <audio
                 ref={audioRef}
-                src={post.audio_path}
                 onTimeUpdate={handleTimeUpdate}
                 onLoadedMetadata={handleLoadedMetadata}
                 onEnded={handleEnded}
+                onError={handleAudioError}
+                onCanPlay={() => console.log('Audio can play')}
                 preload="metadata"
+                crossOrigin="anonymous"
               />
 
               <div className="flex items-center gap-4">