"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { PauseIcon, PlayIcon } from "@kineticui/icons"; export type AudioPlayerProps = { src: string; title?: string; artist?: string; cover?: React.ReactNode; /** Waveform peaks 0–1. Generated from the title when omitted. */ peaks?: number[]; bars?: number; className?: string; }; const fmt = (s: number) => (Number.isFinite(s) ? `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}` : "0:00"); function fakePeaks(seed: string, n: number) { let h = 0; for (const c of seed) h = (h * 31 + c.charCodeAt(0)) | 0; return Array.from({ length: n }, (_, i) => { h = (h * 1103515245 + 12345) & 0x7fffffff; return 0.25 + 0.75 * Math.abs(Math.sin(i / 3.1)) * ((h % 1000) / 1000) * 0.6 + 0.15 * ((h >> 10) % 100) / 100; }); } /** Waveform audio player with scrubbing, keyboard seek and playback speed. */ export function AudioPlayer({ src, title, artist, cover, peaks, bars = 64, className }: AudioPlayerProps) { const audio = React.useRef(null); const [playing, setPlaying] = React.useState(false); const [time, setTime] = React.useState(0); const [duration, setDuration] = React.useState(0); const [rate, setRate] = React.useState(1); const wave = React.useMemo(() => peaks ?? fakePeaks(title ?? src, bars), [peaks, title, src, bars]); const progress = duration ? time / duration : 0; const seek = (fraction: number) => { const a = audio.current; if (!a || !duration) return; a.currentTime = Math.max(0, Math.min(duration, fraction * duration)); setTime(a.currentTime); }; return (

); }

Audio Player

Installation

Exports