波形拖曳播放條
音訊波形視覺化進度條，可拖曳 seek，已播區高亮。
以種子偽隨機生成音訊風格的波形長條，已播放區域以裁切遮罩高亮並帶播放頭豎線，支援點擊與拖曳 seek、滑鼠懸停顯示時間氣泡，內建播放／暫停鈕與模擬播放計時，適合音樂播放器、Podcast 或語音訊息介面。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
180
56
7
0
<WaveformScrubber />
安裝
npx shadcn@latest add https://webberui.com/r/waveform-scrubber.json或在 components.json 設定 registries 後，改用 @webberui/waveform-scrubber 安裝。
安裝依賴後，從 registry JSON（/r/waveform-scrubber.json 的 files[0].content）複製 waveform-scrubber.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { WaveformScrubber } from "@/components/ui/waveform-scrubber";
<WaveformScrubber
duration={227}
bars={60}
onSeek={(seconds) => console.log("跳轉至", seconds)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
duration | number | 180 | 音訊總長度（秒），用於時間顯示與 seek 換算 |
bars | number | 56 | 波形長條數量 |
seed | number | 7 | 偽隨機種子，相同種子產生相同波形（避免 hydration 不一致） |
defaultProgress | number | 0 | 初始播放進度（0–1） |
label | string | "播放進度" | 軌道的無障礙名稱，也作為 slider 的 aria-label |
onSeek | (seconds: number) => void | — | 點擊、拖曳或鍵盤 seek 完成時回呼，回傳目前秒數 |
onPlayChange | (playing: boolean) => void | — | 播放狀態切換時回呼 |
className | string | — | 透傳到最外層容器 |
可及性
- 波形軌道為
role="slider"，可鍵盤聚焦：方向鍵前後跳 5 秒、Home/End跳至頭尾、Space/Enter切換播放 - 以
aria-valuetext用「目前時間 / 總長」格式朗讀進度，aria-valuenow同步更新秒數 - 播放鍵依狀態提供「播放」／「暫停」的
aria-label - 使用者系統開啟「減少動態效果」時，停用時間氣泡彈跳與按鈕縮放等裝飾動畫；播放進度屬功能性更新，仍會照常推進
- 波形長條與播放頭為純裝飾，均標記
aria-hidden，不干擾輔助科技