feat(music-player): play audio and fetch metadata

src/components/MusicPlayer.tsx

@@ -1,34 +1,44 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Bar, Frame, Group, Text, useTerminal } from "react-dom-curse";
 import { theme } from "~/utils/theme";
+import { parseBlob, type IAudioMetadata } from "music-metadata-browser";
+
+import song from "/audio/colorful-flowers.mp3";
 
 const formatDurationMSS = (duration: number) => {
+  duration = Math.floor(duration);
+
   const minutes = Math.floor(duration / 60);
   const seconds = duration % 60;
 
   return `${minutes}:${seconds.toString().padStart(2, "0")}`;
 };
 
-export const MusicPlayer = (props: {
-  title: string;
-  artist: string;
-  album: string;
-  duration: number;
-}) => {
+export const MusicPlayer = () => {
   const { width } = useTerminal();
+  const [metadata, setMetadata] = useState<IAudioMetadata>();
 
-  const [played, setPlayed] = useState(0);
+  const audio = useRef<HTMLAudioElement>();
   useEffect(() => {
-    const interval = setInterval(() => {
-      setPlayed(x => Math.min(props.duration, x + 1));
-    }, 1000);
+    if (audio.current) return;
 
-    return () => clearInterval(interval);
-  }, [setPlayed, props.duration]);
+    audio.current = new Audio(song);
 
-  const time = `${formatDurationMSS(played)}/${formatDurationMSS(
-    props.duration,
-  )}`;
+    void fetch(song)
+      .then(r => r.blob())
+      .then(b => parseBlob(b))
+      .then(d => {
+        void audio.current?.play();
+        setMetadata(d);
+      });
+  }, []);
+
+  if (!audio.current) return null;
+
+  const played = audio.current.currentTime;
+  const duration = audio.current.duration;
+
+  const time = `${formatDurationMSS(played)}/${formatDurationMSS(duration)}`;
 
   return (
     <Group
@@ -39,42 +49,53 @@ export const MusicPlayer = (props: {
       style={{ foreground: theme.white }}
     >
       <Frame x={0} y={0} width={width} height={5} border="single">
-        <Text x={0} y={0} style={{ foreground: theme.cyan, bold: true }}>
-          {props.title} · {props.artist}
-        </Text>
-        <Text x={0} y={1} style={{ foreground: theme.yellow }}>
-          {props.album}
-        </Text>
+        {metadata ? (
+          <>
+            <Text x={0} y={0} style={{ foreground: theme.cyan, bold: true }}>
+              {metadata.common.title ?? "Unknown"} ·{" "}
+              {metadata.common.artist ?? "Unknown"}
+            </Text>
+            <Text x={0} y={1} style={{ foreground: theme.yellow }}>
+              {metadata.common.album ?? "Unknown"}
+            </Text>
 
-        <Group x={0} y={2} width={width} height={1}>
-          <Bar
-            x={0}
-            y={0}
-            style={{
-              foreground: theme.green,
-              background: "#55576d",
-              bold: true,
-            }}
-            char=" "
-            size={width}
-            direction="horizontal"
-          />
-          <Bar
-            x={0}
-            y={0}
-            style={{
-              foreground: "#55576d",
-              background: theme.green,
-              bold: true,
-            }}
-            char=" "
-            size={width * (played / props.duration)}
-            direction="horizontal"
-          />
-          <Text x={Math.floor(width / 2 - time.length / 2 - 1)} y={0}>
-            {time}
-          </Text>
-        </Group>
+            <Group x={0} y={2} width={width} height={1}>
+              <Bar
+                x={0}
+                y={0}
+                style={{
+                  foreground: theme.green,
+                  background: "#55576d",
+                  bold: true,
+                }}
+                char=" "
+                size={width}
+                direction="horizontal"
+              />
+              <Bar
+                x={0}
+                y={0}
+                style={{
+                  foreground: "#55576d",
+                  background: theme.green,
+                  bold: true,
+                }}
+                char=" "
+                size={width * (played / duration)}
+                direction="horizontal"
+              />
+              <Text x={Math.floor(width / 2 - time.length / 2 - 1)} y={0}>
+                {time}
+              </Text>
+            </Group>
+          </>
+        ) : (
+          <>
+            <Text x={0} y={0}>
+              No playback found.
+            </Text>
+          </>
+        )}
       </Frame>
 
       <Text x={1} y={0} style={{ foreground: theme.magenta }}>