卡拉OK歌詞

多行歌詞依時間軸播放：當前行放大聚焦，文字由左至右被漸層逐字掃色，已唱行淡出上移、整份歌詞自動捲動保持當前行置中。內建播放／暫停／重播控制，playing 也可完全受控，適合音樂產品頁、歌詞展示與節奏感標語。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

每行時長（毫秒）defaultDuration

2400

當前行放大倍率activeScale

1.12

檢視窗高度height

240

循環播放loop

顯示控制列showControls

<KaraokeText />

安裝

npx shadcn@latest add https://webberui.com/r/karaoke-text.json

或在 components.json 設定 registries 後，改用 @webberui/karaoke-text 安裝。

安裝依賴後，從 registry JSON（/r/karaoke-text.json 的 files[0].content）複製 karaoke-text.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { KaraokeText } from "@/components/ui/karaoke-text";

<KaraokeText
  lines={[
    { text: "第一句歌詞", duration: 2400 },
    { text: "第二句歌詞", duration: 2600 },
    { text: "第三句歌詞" },
  ]}
  height={220}
  className="text-xl font-semibold"
/>

Props

Prop	型別	預設值	說明
`lines`	`KaraokeLine[]`	—	歌詞行陣列，`KaraokeLine` 為 `{ text: string; duration?: number }`（毫秒）
`playing`	`boolean`	—	受控播放狀態；不傳則由內部狀態自行管理
`onPlayingChange`	`(playing: boolean) => void`	—	播放狀態變更回呼（點擊控制或播放結束時觸發）
`autoPlay`	`boolean`	`true`	非受控模式下是否自動開始播放
`loop`	`boolean`	`true`	播放完最後一行後是否從頭循環
`showControls`	`boolean`	`true`	是否顯示內建的播放／暫停／重播控制列
`height`	`number`	`240`	歌詞檢視窗高度（px），當前行自動捲動置中
`defaultDuration`	`number`	`2400`	未指定 `duration` 的行使用的預設時長（毫秒）
`activeScale`	`number`	`1.12`	當前行的放大倍率
`baseClassName`	`string`	灰階文字色	未唱到文字的顏色 class
`fillClassName`	`string`	琥珀→玫瑰→紫紅漸層	已唱文字的漸層填色 class（以 `bg-clip-text` 上色）
`onLineChange`	`(index: number) => void`	—	當前行索引變更時的回呼
`className`	`string`	—	透傳到最外層容器，文字大小與字重會被歌詞行繼承

可及性

使用者系統開啟「減少動態效果」時，不做逐字掃色、縮放與模糊，直接以完整填色高亮當前行，仍依時間軸換行
歌詞底層為真實文字可被螢幕閱讀器朗讀；漸層填色層為裝飾性複本，已標記 aria-hidden
播放、暫停、重新開始按鈕皆附 aria-label，並顯示目前行數（如 03 / 06）供視覺確認
分頁切到背景時 rAF 自動暫停，回到前景以時間差夾限續播，不會瞬間跳行

Playground

安裝

使用

Props

可及性

On this page