use audio session api

src/app/_providers/GsapProvicer.tsx

@@ -103,13 +103,6 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     return () => { console.log("gsap cleanup") }
   })
 
-  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
-    tl.current?.add(animation, position);
-  },[])
-  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
-    tl.current?.add(fn, position)
-  },[])
-
   // Handoff: fire registered callbacks once, when the entrance finishes.
   const readyFired = useRef(false)
   const readyCbs = useRef<Array<() => void>>([])
@@ -124,6 +117,21 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     else readyCbs.current.push(cb)
   },[])
 
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    // Content can mount in waves (e.g. nested queries resolving after the
+    // entrance already played). Parking a tween in a finished, paused timeline
+    // would freeze it at its from-state, so once the entrance is done let the
+    // (live) tween play on its own instead.
+    if (readyFired.current) return
+    tl.current?.add(animation, position);
+  },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    // Same late-arrival case: a callback added past the playhead never fires, so
+    // run the reveal immediately once the entrance has finished.
+    if (readyFired.current) { fn(); return }
+    tl.current?.add(fn, position)
+  },[])
+
   // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
   // can fire freely while content height animates.
   const refreshQueued = useRef(false)

src/app/cv/_components/CvCategory.tsx

@@ -1,24 +1,24 @@
 'use client'
 import { trpc } from "~/app/_trpc/Client"
 import CvEntry from "./CvEntry"
-import type { servTrpc } from "~/app/_trpc/ServerClient"
-import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
-import { cn } from "~/lib/utils" 
+import { cn } from "~/lib/utils"
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
 import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
 import { ScrollArea } from "~/components/ui/scroll-area";
 type CvCategoryProps = {
   initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
   layout: "row"|"col",
+  position?: number,
   children?: React.ReactElement<Parameters<typeof CvEntry>>
 }
 export default function CvCategory(props:CvCategoryProps)  {
   const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
   const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
+  const position = props.position ?? 0
 		return (
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
+			<AnimatedCard position={position} className={cn(props.layout == "row" ? "w-full" : "", "h-screen")}>
 				<CardHeader>
 					<CardTitle>
 						{category.data?.name}
@@ -28,7 +28,7 @@ export default function CvCategory(props:CvCategoryProps)  {
 					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
 						<ScrollArea>
 						{entries.data?.map((entry,i) => (
-							<AnimatePopUp position={i}key={entry.id}>
+							<AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
 							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
 							</AnimatePopUp>
 						))}
@@ -36,7 +36,7 @@ export default function CvCategory(props:CvCategoryProps)  {
 					</CardContent>
 					:
 					<></>
-				} 
+				}
-			</Card>
+			</AnimatedCard>
-		) 
+		)
 }

src/app/cv/page.tsx

@@ -1,92 +1,51 @@
 'use client'
-import { useGSAP } from "@gsap/react";
+import { useTimeLine } from "../_providers/GsapProvicer";
-import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
 import { trpc } from "../_trpc/Client";
-import { useRef } from "react";
 import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
 import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
-import gsap from 'gsap'
 export default function CvPage() {
   const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
   const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
   const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
   const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
-  const gsapContext = useGsapContext()
+  useTimeLine(col2Categories.data)
-  const container = useRef<HTMLDivElement>(null)
-  enum Direction {
-    Left = 1,
-    Up,
-    Right,
-    Down
-  }
-  const nextGsapConf = (direction: Direction) => {
-    switch (direction) {
-      case Direction.Left:
-        return { x: -100, opacity: 0, duration: 0.5 }
-      case Direction.Up:
-        return { y: -100, opacity: 0, duration: 0.5 }
-      case Direction.Right:
-        return { x: 100, opacity: 0, duration: 0.5 }
-      case Direction.Down:
-        return { y: 100, opacity: 0, duration: 0.5 }
-    }
-  }
-  useTimeLine(col2Categories)
-  useGSAP(() => {
-    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
-    let dir = Direction.Left;
-    items?.forEach(item => {
-      gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
-      if (dir == Direction.Down) {
-        dir = Direction.Left
-      } else {
-        dir = dir + 1
-      }
-    })
-  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
   return (
     <>
-      <SidebarProvider ref={container}>
+      <SidebarProvider>
         {sidebarCategories.data &&
           <>
             <SidebarTriggerDisappearsOnMobile />
-            <Sidebar className="gsapan ">
+            <Sidebar>
               <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat) => {
+                {sidebarCategories.data?.map((cat, i) => {
                   if (cat !== undefined) {
                     return (
-                      <CvCategory layout="col" initialData={cat} key={cat.id} />
+                      <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
                     )
                   }
                 })}
               </SidebarContent>
             </Sidebar>
-          </> 
+          </>
         }
         <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
           <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
             <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.data?.map((cat) => {
+              {headerCategories.data?.map((cat, i) => (
-                return (
+                <CvCategory layout="row" position={i} initialData={cat} key={cat.id} />
-                  <CvCategory layout="row" initialData={cat} key={cat.id} />
+              ))}
-                )
-              })}
             </div>
             <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
               <div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.data?.map((cat) => {
+                {col1Categories.data?.map((cat, i) => (
-                  return (
+                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
+                ))}
-                  )
-                })}
               </div>
               <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.data?.map((cat) => {
+                {col2Categories.data?.map((cat, i) => (
-                  return (
+                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
+                ))}
-                  )
-                })}
               </div>
             </div>
           </div>

src/app/layout.tsx

@@ -12,6 +12,7 @@ import TrpcProvider from "./_trpc/TrpcProvider";
 import ThemeProvider from './_providers/ThemeProvider'
 import GsapProvider from "./_providers/GsapProvicer";
 import {MessagesProvider} from "./_providers/MessagesProvider";
+import { MusicPlayerProvider } from "./music/_components/MusicPlayerProvider";
 import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
 import { cn } from "~/lib/utils";
 import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
@@ -49,6 +50,7 @@ export default async function RootLayout({
 						<body className="flex flex-col bg-background text-foreground">
 							<ThemeProvider>
 							<MessagesProvider>
+								<MusicPlayerProvider>
 								<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
 									<TopNav />
 									<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
@@ -57,6 +59,7 @@ export default async function RootLayout({
 									{modal}
 								</AnimatedBackGroundContainer>
 								<ChatFAB />
+								</MusicPlayerProvider>
 								</MessagesProvider>
 							</ThemeProvider>
 						</body>

src/app/music/_components/AudioPlayer.tsx

@@ -6,6 +6,7 @@ import type WaveSurfer from "wavesurfer.js";
 import { Download, Loader2, Pause, Play } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { toast } from "sonner";
+import { useMusicPlayer } from "./MusicPlayerProvider";
 
 function formatTime(seconds: number) {
 	if (!Number.isFinite(seconds)) return "0:00";
@@ -28,32 +29,46 @@ function waveColors() {
 	};
 }
 
+/**
+ * Per-track waveform. Playback itself is owned by the shared MusicPlayer engine
+ * (so it keeps running across navigation); this wavesurfer instance is only a
+ * visual + seek surface that mirrors the engine when its track is active.
+ */
 export default function AudioPlayer(props: {
-	/** Streaming-friendly source the player actually plays. */
+	id: string;
 	src: string;
-	/** Original high-quality file offered via the download button. */
 	downloadUrl: string;
 	downloadName: string;
 }) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const wsRef = useRef<WaveSurfer | null>(null);
-	const [playing, setPlaying] = useState(false);
-	const [current, setCurrent] = useState(0);
-	const [duration, setDuration] = useState(0);
 	const [ready, setReady] = useState(false);
+	const [duration, setDuration] = useState(0);
 	const [downloading, setDownloading] = useState(false);
 	const { resolvedTheme } = useTheme();
 
+	const { currentId, isPlaying, currentTime, toggle, seek, subscribeTime } = useMusicPlayer();
+	const isActive = currentId === props.id;
+
+	// Reach live values from the once-created wavesurfer callbacks.
+	const isActiveRef = useRef(isActive);
+	isActiveRef.current = isActive;
+	const currentTimeRef = useRef(currentTime);
+	currentTimeRef.current = currentTime;
+	const toggleRef = useRef(toggle);
+	toggleRef.current = toggle;
+	const seekRef = useRef(seek);
+	seekRef.current = seek;
+
 	useEffect(() => {
 		let ws: WaveSurfer | null = null;
 		let cancelled = false;
 		setReady(false);
-		setCurrent(0);
 
 		(async () => {
 			const WaveSurferClass = (await import("wavesurfer.js")).default;
 			if (cancelled || !containerRef.current) return;
-			ws = WaveSurferClass.create({
+			const instance = WaveSurferClass.create({
 				container: containerRef.current,
 				url: props.src,
 				height: 44,
@@ -64,15 +79,20 @@ export default function AudioPlayer(props: {
 				cursorWidth: 1,
 				...waveColors(),
 			});
-			wsRef.current = ws;
+			ws = instance;
-			ws.on("ready", () => {
+			wsRef.current = instance;
+			instance.on("ready", () => {
+				// This media is for drawing only — never let it make sound.
+				instance.setMuted(true);
 				setReady(true);
-				setDuration(ws?.getDuration() ?? 0);
+				setDuration(instance.getDuration());
+				if (isActiveRef.current) instance.setTime(currentTimeRef.current);
+			});
+			// Clicking the waveform: start this track if it isn't playing, then seek.
+			instance.on("interaction", (time: number) => {
+				if (!isActiveRef.current) toggleRef.current(props.id);
+				seekRef.current(time);
 			});
-			ws.on("play", () => setPlaying(true));
-			ws.on("pause", () => setPlaying(false));
-			ws.on("finish", () => setPlaying(false));
-			ws.on("timeupdate", (t) => setCurrent(t));
 		})();
 
 		return () => {
@@ -82,15 +102,23 @@ export default function AudioPlayer(props: {
 		};
 	}, [props.src]);
 
+	// Mirror the engine's playback position onto the cursor while active.
+	useEffect(() => {
+		const ws = wsRef.current;
+		if (!ws || !ready) return;
+		if (!isActive) {
+			ws.setTime(0);
+			return;
+		}
+		ws.setTime(currentTimeRef.current);
+		return subscribeTime((t) => wsRef.current?.setTime(t));
+	}, [isActive, ready, subscribeTime]);
+
 	// Re-tint the waveform when the user toggles light/dark.
 	useEffect(() => {
 		wsRef.current?.setOptions(waveColors());
 	}, [resolvedTheme]);
 
-	function togglePlay() {
-		wsRef.current?.playPause();
-	}
-
 	async function handleDownload() {
 		setDownloading(true);
 		try {
@@ -114,6 +142,8 @@ export default function AudioPlayer(props: {
 		}
 	}
 
+	const playing = isActive && isPlaying;
+
 	return (
 		<div className="flex items-center gap-3 rounded-lg border bg-transparent px-3 py-2">
 			<Button
@@ -122,13 +152,13 @@ export default function AudioPlayer(props: {
 				variant="ghost"
 				aria-label={playing ? "Pause" : "Play"}
 				disabled={!ready}
-				onClick={togglePlay}
+				onClick={() => toggle(props.id)}
 			>
 				{playing ? <Pause /> : <Play />}
 			</Button>
 
 			<span className="w-10 shrink-0 text-right font-mono text-xs text-muted-foreground tabular-nums">
-				{formatTime(current)}
+				{formatTime(isActive ? currentTime : 0)}
 			</span>
 
 			<div className="relative flex-1">

src/app/music/_components/MusicMiniPlayer.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from "react";
+import { Music } from "lucide-react";
+import {
+	Drawer,
+	DrawerContent,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "~/components/ui/drawer";
+import { Slider } from "~/components/ui/slider";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+import PlayerControls from "./PlayerControls";
+
+function formatTime(seconds: number) {
+	if (!Number.isFinite(seconds)) return "0:00";
+	const m = Math.floor(seconds / 60);
+	const s = Math.floor(seconds % 60);
+	return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Global, persistent mini-player: a floating button (shown once something is
+ * loaded) that opens a drawer with the transport controls and a scrubber, so
+ * playback can be controlled from any page while it keeps running in the
+ * background.
+ */
+export default function MusicMiniPlayer() {
+	const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
+	const [open, setOpen] = useState(false);
+
+	if (!currentTrack) return null;
+
+	return (
+		<Drawer open={open} onOpenChange={setOpen}>
+			<DrawerTrigger asChild>
+				<button
+					type="button"
+					aria-label="Open player"
+					className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
+				>
+					<Music className={isPlaying ? "animate-pulse" : ""} />
+					<span className="truncate text-sm">{currentTrack.title}</span>
+				</button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle>{currentTrack.title}</DrawerTitle>
+				</DrawerHeader>
+				<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
+					<div className="flex items-center gap-2">
+						<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(currentTime)}
+						</span>
+						<Slider
+							className="flex-1"
+							min={0}
+							max={duration || 1}
+							step={0.1}
+							value={[currentTime]}
+							onValueChange={([v]) => seek(v ?? 0)}
+						/>
+						<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(duration)}
+						</span>
+					</div>
+					<PlayerControls />
+				</div>
+			</DrawerContent>
+		</Drawer>
+	);
+}

src/app/music/_components/MusicPlayerProvider.tsx

@@ -0,0 +1,314 @@
+'use client'
+
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type ReactNode,
+} from "react";
+import { trpc } from "~/app/_trpc/Client";
+import MusicMiniPlayer from "./MusicMiniPlayer";
+
+export type PlayerTrack = {
+	id: string;
+	title: string;
+	/** Streaming-friendly source actually played. */
+	src: string;
+	/** Original high-quality file for the download button. */
+	downloadUrl: string;
+	downloadName: string;
+};
+
+type MusicPlayerValue = {
+	tracks: PlayerTrack[];
+	currentId: string | null;
+	currentTrack: PlayerTrack | null;
+	isPlaying: boolean;
+	shuffle: boolean;
+	currentTime: number;
+	duration: number;
+	/** Play button on a track: start it, or toggle play/pause if already current. */
+	toggle: (id: string) => void;
+	/** Global play/pause — acts on the current track (or starts the first one). */
+	togglePlayCurrent: () => void;
+	next: () => void;
+	previous: () => void;
+	toggleShuffle: () => void;
+	seek: (seconds: number) => void;
+	/** Subscribe to playback time updates (for waveform cursors). */
+	subscribeTime: (cb: (time: number) => void) => () => void;
+};
+
+const MusicPlayerContext = createContext<MusicPlayerValue | null>(null);
+
+export function useMusicPlayer() {
+	const ctx = useContext(MusicPlayerContext);
+	if (!ctx) throw new Error("useMusicPlayer must be used within a MusicPlayerProvider");
+	return ctx;
+}
+
+export function MusicPlayerProvider({ children }: { children: ReactNode }) {
+	// The provider owns the playlist so playback survives navigating away from
+	// the music page. The query is cached, so the music page shares this request.
+	const { data } = trpc.music.list.useQuery();
+	const tracks = useMemo<PlayerTrack[]>(
+		() =>
+			(data ?? []).map((t) => ({
+				id: t.id,
+				title: t.title,
+				src: t.streamUrl ?? t.fileUrl,
+				downloadUrl: t.fileUrl,
+				downloadName: t.fileName,
+			})),
+		[data],
+	);
+
+	const [currentId, setCurrentId] = useState<string | null>(null);
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [shuffle, setShuffle] = useState(false);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+
+	const audioRef = useRef<HTMLAudioElement | null>(null);
+	const tracksRef = useRef(tracks);
+	tracksRef.current = tracks;
+
+	// Lightweight pub/sub so each waveform can follow playback time without every
+	// player re-rendering on the audio element's frequent timeupdate.
+	const timeSubs = useRef<Set<(t: number) => void>>(new Set());
+	const subscribeTime = useCallback((cb: (t: number) => void) => {
+		timeSubs.current.add(cb);
+		return () => {
+			timeSubs.current.delete(cb);
+		};
+	}, []);
+	const emitTime = useCallback((t: number) => {
+		timeSubs.current.forEach((cb) => cb(t));
+	}, []);
+
+	const currentTrack = useMemo(
+		() => tracks.find((t) => t.id === currentId) ?? null,
+		[tracks, currentId],
+	);
+
+	const toggle = useCallback((id: string) => {
+		setCurrentId((prev) => {
+			if (prev === id) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			setIsPlaying(true);
+			return id;
+		});
+	}, []);
+
+	const togglePlayCurrent = useCallback(() => {
+		setCurrentId((prev) => {
+			if (prev) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			const first = tracksRef.current[0]?.id ?? null;
+			if (first) setIsPlaying(true);
+			return first;
+		});
+	}, []);
+
+	const step = useCallback((dir: 1 | -1) => {
+		const ids = tracksRef.current.map((t) => t.id);
+		if (ids.length === 0) return;
+		setCurrentId((prev) => {
+			let nextId: string;
+			if (shuffle && dir === 1 && ids.length > 1) {
+				do {
+					nextId = ids[Math.floor(Math.random() * ids.length)]!;
+				} while (nextId === prev);
+			} else {
+				const idx = prev ? ids.indexOf(prev) : -1;
+				nextId = ids[(idx + dir + ids.length) % ids.length]!;
+			}
+			setIsPlaying(true);
+			return nextId;
+		});
+	}, [shuffle]);
+	const next = useCallback(() => step(1), [step]);
+	const previous = useCallback(() => step(-1), [step]);
+	const toggleShuffle = useCallback(() => setShuffle((s) => !s), []);
+
+	const stepRef = useRef(step);
+	stepRef.current = step;
+
+	const seek = useCallback(
+		(s: number) => {
+			if (audioRef.current) audioRef.current.currentTime = s;
+			setCurrentTime(s);
+			emitTime(s);
+		},
+		[emitTime],
+	);
+
+	// Persistent audio element + listeners, created once on the client.
+	useEffect(() => {
+		const audio = new Audio();
+		audio.preload = "metadata";
+		audioRef.current = audio;
+		const onTime = () => {
+			setCurrentTime(audio.currentTime);
+			emitTime(audio.currentTime);
+		};
+		const onMeta = () => setDuration(audio.duration || 0);
+		const onEnded = () => stepRef.current(1);
+		audio.addEventListener("timeupdate", onTime);
+		audio.addEventListener("loadedmetadata", onMeta);
+		audio.addEventListener("ended", onEnded);
+		return () => {
+			audio.pause();
+			audio.removeEventListener("timeupdate", onTime);
+			audio.removeEventListener("loadedmetadata", onMeta);
+			audio.removeEventListener("ended", onEnded);
+			audioRef.current = null;
+		};
+	}, [emitTime]);
+
+	// Swap the source when the current track changes.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio) return;
+		if (!currentTrack) {
+			audio.removeAttribute("src");
+			audio.load();
+			return;
+		}
+		if (audio.src !== currentTrack.src) {
+			audio.src = currentTrack.src;
+			audio.load();
+			setCurrentTime(0);
+			setDuration(0);
+		}
+	}, [currentTrack]);
+
+	// Reflect the desired play state onto the element.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio || !currentTrack) return;
+		if (isPlaying) audio.play().catch(() => {});
+		else audio.pause();
+	}, [isPlaying, currentTrack]);
+
+	// OS-level media controls (lock screen, notification shade, media keys, etc.)
+	// via the Media Session API. Wire the transport actions to our state.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		const ms = navigator.mediaSession;
+		const handlers: [MediaSessionAction, MediaSessionActionHandler][] = [
+			["play", () => setIsPlaying(true)],
+			["pause", () => setIsPlaying(false)],
+			["previoustrack", () => stepRef.current(-1)],
+			["nexttrack", () => stepRef.current(1)],
+			[
+				"seekto",
+				(details) => {
+					if (typeof details.seekTime === "number") seek(details.seekTime);
+				},
+			],
+			[
+				"seekbackward",
+				(details) => seek((audioRef.current?.currentTime ?? 0) - (details.seekOffset ?? 10)),
+			],
+			[
+				"seekforward",
+				(details) => seek((audioRef.current?.currentTime ?? 0) + (details.seekOffset ?? 10)),
+			],
+		];
+		for (const [action, handler] of handlers) {
+			try {
+				ms.setActionHandler(action, handler);
+			} catch {
+				// Action unsupported by this browser — ignore.
+			}
+		}
+		return () => {
+			for (const [action] of handlers) {
+				try {
+					ms.setActionHandler(action, null);
+				} catch {
+					// ignore
+				}
+			}
+		};
+	}, [seek]);
+
+	// Keep the OS-visible metadata in sync with the current track.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		navigator.mediaSession.metadata = currentTrack
+			? new MediaMetadata({
+					title: currentTrack.title,
+					artist: "Gregor Lohaus",
+				})
+			: null;
+	}, [currentTrack]);
+
+	// Reflect play/pause state to the OS so the right button is shown.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		navigator.mediaSession.playbackState = currentTrack
+			? isPlaying
+				? "playing"
+				: "paused"
+			: "none";
+	}, [isPlaying, currentTrack]);
+
+	// Keep the scrubber position on the OS controls in sync.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		if (!("setPositionState" in navigator.mediaSession)) return;
+		try {
+			if (duration > 0 && Number.isFinite(duration)) {
+				navigator.mediaSession.setPositionState({
+					duration,
+					position: Math.min(currentTime, duration),
+					playbackRate: audioRef.current?.playbackRate ?? 1,
+				});
+			} else {
+				navigator.mediaSession.setPositionState();
+			}
+		} catch {
+			// Some browsers throw on invalid state — ignore.
+		}
+	}, [currentTime, duration]);
+
+	const value = useMemo<MusicPlayerValue>(
+		() => ({
+			tracks,
+			currentId,
+			currentTrack,
+			isPlaying,
+			shuffle,
+			currentTime,
+			duration,
+			toggle,
+			togglePlayCurrent,
+			next,
+			previous,
+			toggleShuffle,
+			seek,
+			subscribeTime,
+		}),
+		[
+			tracks, currentId, currentTrack, isPlaying, shuffle, currentTime, duration,
+			toggle, togglePlayCurrent, next, previous, toggleShuffle, seek, subscribeTime,
+		],
+	);
+
+	return (
+		<MusicPlayerContext.Provider value={value}>
+			{children}
+			<MusicMiniPlayer />
+		</MusicPlayerContext.Provider>
+	);
+}

src/app/music/_components/PlayerControls.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+
+export default function PlayerControls() {
+	const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
+		useMusicPlayer();
+
+	return (
+		<div className="flex items-center justify-center gap-1">
+			<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
+				<SkipBack />
+			</Button>
+			<Button
+				type="button"
+				size="icon-lg"
+				variant="secondary"
+				aria-label={isPlaying ? "Pause" : "Play"}
+				onClick={togglePlayCurrent}
+			>
+				{isPlaying ? <Pause /> : <Play />}
+			</Button>
+			<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
+				<SkipForward />
+			</Button>
+			<Button
+				type="button"
+				size="icon"
+				variant={shuffle ? "secondary" : "ghost"}
+				aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
+				aria-pressed={shuffle}
+				onClick={toggleShuffle}
+			>
+				<Shuffle />
+			</Button>
+		</div>
+	);
+}

src/app/music/page.tsx

@@ -15,11 +15,11 @@ export default function MusicPage() {
     <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
 			<AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
 			<div className="flex flex-wrap h-fit content-center">
-				<AnimateTextIn className="flex flex-wrap mr-[1em]" position={0.5}>
+				<AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
 					<div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
 					<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
 				</AnimateTextIn>
-				<AnimatePopUp position={2} className="items-center content-center">
+				<AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
 					<div className="flex flex-row">
 						<img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
 						<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
@@ -33,7 +33,7 @@ export default function MusicPage() {
 				<div key={track.id}>
 					<Card.AnimatedCard position={i + 1}>
 						<Card.CardHeader>
-							<AnimateTextIn position={i + 1.2} animation="slide">
+							<AnimateTextIn once position={i + 1.2} animation="slide">
 								<Card.CardTitle>{track.title}</Card.CardTitle>
 							</AnimateTextIn>
 						</Card.CardHeader>
@@ -41,8 +41,9 @@ export default function MusicPage() {
 							{track.description && (
 								<p className="text-sm text-muted-foreground gsapant">{track.description}</p>
 							)}
-							<AnimatePopUp position={i + 1.3}>
+							<AnimatePopUp duration={2} ease='elastic.inOut'  position={i + 1.3} once>
 								<AudioPlayer
+									id={track.id}
 									src={track.streamUrl ?? track.fileUrl}
 									downloadUrl={track.fileUrl}
 									downloadName={track.fileName}