feat: audio

src/components/MediaPlayer/index.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import AudioPlayer from '../AudioPlayer'
+import VideoPlayer from '../VideoPlayer'
+
+export default function MediaPlayer({ src, className }: { src: string; className?: string }) {
+  const [mediaType, setMediaType] = useState<'video' | 'audio' | null>(null)
+
+  useEffect(() => {
+    if (!src) {
+      setMediaType(null)
+      return
+    }
+
+    const url = new URL(src)
+    const extension = url.pathname.split('.').pop()?.toLowerCase()
+
+    if (extension && ['mp3', 'wav', 'flac', 'aac', 'm4a', 'opus', 'wma'].includes(extension)) {
+      setMediaType('audio')
+      return
+    }
+
+    const video = document.createElement('video')
+    video.src = src
+    video.preload = 'metadata'
+    video.crossOrigin = 'anonymous'
+
+    video.onloadedmetadata = () => {
+      setMediaType(video.videoWidth > 0 || video.videoHeight > 0 ? 'video' : 'audio')
+    }
+
+    video.onerror = () => {
+      setMediaType(null)
+    }
+
+    return () => {
+      video.src = ''
+    }
+  }, [src])
+
+  if (!mediaType) {
+    return null
+  }
+
+  if (mediaType === 'video') {
+    return <VideoPlayer src={src} className={className} />
+  }
+
+  return <AudioPlayer src={src} className={className} />
+}