媒體
波形拖曳播放條
音訊波形視覺化進度條，可拖曳 seek，已播區高亮。
以種子偽隨機生成音訊風格的波形長條，已播放區域以裁切遮罩高亮並帶播放頭豎線，支援點擊與拖曳 seek、滑鼠懸停顯示時間氣泡，內建播放／暫停鈕與模擬播放計時，適合音樂播放器、Podcast 或語音訊息介面。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/waveform-scrubber.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
180
56
7
0
編輯中的呼叫預設屬性
<WaveformScrubber/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/waveform-scrubber.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/waveform-scrubber 安裝。
使用
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，不干擾輔助科技