Spaces:
Runtime error
Runtime error
| "use client"; | |
| import { useEffect, useRef, useState } from "react"; | |
| /** Decodes audio once and reduces it to per-column peak pairs for drawing. */ | |
| export function useAudioPeaks(source: string | File | null, columns = 900) { | |
| const [peaks, setPeaks] = useState<Float32Array | null>(null); | |
| const [duration, setDuration] = useState(0); | |
| const [failed, setFailed] = useState(false); | |
| useEffect(() => { | |
| if (!source) { | |
| setPeaks(null); | |
| setDuration(0); | |
| setFailed(false); | |
| return; | |
| } | |
| let cancelled = false; | |
| setFailed(false); | |
| setPeaks(null); | |
| const run = async () => { | |
| try { | |
| const bytes = | |
| typeof source === "string" | |
| ? await (await fetch(source)).arrayBuffer() | |
| : await source.arrayBuffer(); | |
| const AudioCtx = | |
| window.AudioContext ?? | |
| (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext; | |
| const context = new AudioCtx(); | |
| const buffer = await context.decodeAudioData(bytes); | |
| await context.close(); | |
| if (cancelled) return; | |
| const channel = buffer.getChannelData(0); | |
| const perColumn = Math.max(1, Math.floor(channel.length / columns)); | |
| const result = new Float32Array(columns); | |
| for (let column = 0; column < columns; column += 1) { | |
| const start = column * perColumn; | |
| let peak = 0; | |
| for (let i = 0; i < perColumn; i += 1) { | |
| const value = Math.abs(channel[start + i] ?? 0); | |
| if (value > peak) peak = value; | |
| } | |
| result[column] = peak; | |
| } | |
| setPeaks(result); | |
| setDuration(buffer.duration); | |
| } catch { | |
| if (!cancelled) setFailed(true); | |
| } | |
| }; | |
| void run(); | |
| return () => { | |
| cancelled = true; | |
| }; | |
| }, [source, columns]); | |
| return { peaks, duration, failed }; | |
| } | |
| export function Waveform({ | |
| peaks, | |
| progress, | |
| onSeek, | |
| height = 56, | |
| idle = false, | |
| }: { | |
| peaks: Float32Array | null; | |
| progress: number; | |
| onSeek?: (ratio: number) => void; | |
| height?: number; | |
| idle?: boolean; | |
| }) { | |
| const canvasRef = useRef<HTMLCanvasElement>(null); | |
| const wrapRef = useRef<HTMLDivElement>(null); | |
| useEffect(() => { | |
| const canvas = canvasRef.current; | |
| const wrap = wrapRef.current; | |
| if (!canvas || !wrap) return; | |
| const draw = () => { | |
| const ratio = window.devicePixelRatio || 1; | |
| const width = wrap.clientWidth; | |
| canvas.width = width * ratio; | |
| canvas.height = height * ratio; | |
| canvas.style.width = `${width}px`; | |
| canvas.style.height = `${height}px`; | |
| const context = canvas.getContext("2d"); | |
| if (!context) return; | |
| context.scale(ratio, ratio); | |
| context.clearRect(0, 0, width, height); | |
| const columnWidth = 2; | |
| const gap = 1; | |
| const total = Math.floor(width / (columnWidth + gap)); | |
| const middle = height / 2; | |
| const playedColumns = Math.round(total * progress); | |
| for (let i = 0; i < total; i += 1) { | |
| const value = peaks | |
| ? (peaks[Math.floor((i / total) * peaks.length)] ?? 0) | |
| : idle | |
| ? 0.06 | |
| : 0.06 + 0.04 * Math.sin(i / 3); | |
| const amplitude = Math.max(1.5, value * (height / 2) * 0.94); | |
| context.fillStyle = i <= playedColumns && peaks ? "#c7e84f" : "#33333b"; | |
| context.fillRect(i * (columnWidth + gap), middle - amplitude, columnWidth, amplitude * 2); | |
| } | |
| }; | |
| draw(); | |
| const observer = new ResizeObserver(draw); | |
| observer.observe(wrap); | |
| return () => observer.disconnect(); | |
| }, [peaks, progress, height, idle]); | |
| return ( | |
| <div | |
| ref={wrapRef} | |
| className={onSeek ? "w-full cursor-pointer" : "w-full"} | |
| onClick={(event) => { | |
| if (!onSeek) return; | |
| const rect = event.currentTarget.getBoundingClientRect(); | |
| onSeek(Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width))); | |
| }} | |
| > | |
| <canvas ref={canvasRef} aria-hidden /> | |
| </div> | |
| ); | |
| } | |