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

src/App.tsx

@@ -3,33 +3,40 @@ import { MusicPlayer } from "./components/MusicPlayer";
 import { Kitty } from "./components/Kitty";
 import { AppContextProvider } from "./context/AppContext";
 import { Waybar } from "./components/Waybar/Waybar";
+import { MusicVisualizer } from "./components/MusicVisualizer";
+import { useState } from "react";
 
 function App() {
+  const [clicked, setClicked] = useState(false);
+
   return (
     <AppContextProvider>
       <BrowserRouter>
-        <main
-          className={
-            "insets-0 fixed flex h-screen w-screen flex-col gap-3 bg-[url(/wallpaper.jpg)] bg-cover p-3 font-body leading-[26px]"
-          }
-        >
-          <Waybar />
-
-          <Kitty className="flex-1"></Kitty>
-
-          <div className="flex h-[142px] gap-3">
-            <Kitty className="flex-1 select-none">
-              <MusicPlayer
-                title="Last Tango in Kyoto"
-                artist="Floating Bits"
-                album="Last Tango in Kyoto"
-                duration={93}
-              />
-            </Kitty>
+        {clicked ? (
+          <main
+            className={
+              "insets-0 fixed flex h-screen w-screen flex-col gap-3 bg-[url(/wallpaper.jpg)] bg-cover p-3 font-body leading-[26px]"
+            }
+          >
+            <Waybar />
 
             <Kitty className="flex-1"></Kitty>
-          </div>
-        </main>
+
+            <div className="flex h-[142px] gap-3">
+              <Kitty className="flex-1 select-none">
+                <MusicPlayer />
+              </Kitty>
+
+              <Kitty className="flex-1">
+                <MusicVisualizer />
+              </Kitty>
+            </div>
+          </main>
+        ) : (
+          <main className="flex h-screen items-center justify-center">
+            <button onClick={() => setClicked(true)}>Login</button>
+          </main>
+        )}
       </BrowserRouter>
     </AppContextProvider>
   );

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 }}>