黑膠唱盤
可播放的黑膠唱盤：唱片旋轉、唱針擺入、可拖碟搓盤。
以 CSS 徑向漸層繪出黑膠溝紋與中心標籤，播放時唱片勻速自轉、唱針以彈簧擺入停在碟上；直接拖曳唱片即可搓盤——角速度完全跟手，放開後平滑回穩到播放轉速，附播放/暫停與曲目資訊列。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
33.3
224
<VinylRecordPlayer />
安裝
npx shadcn@latest add https://webberui.com/r/vinyl-record-player.json或在 components.json 設定 registries 後，改用 @webberui/vinyl-record-player 安裝。
安裝依賴後，從 registry JSON（/r/vinyl-record-player.json 的 files[0].content）複製 vinyl-record-player.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { VinylRecordPlayer } from "@/components/ui/vinyl-record-player";
<VinylRecordPlayer
track={{ title: "霓虹夜行", artist: "月台樂團", hue: 265 }}
playing
onPlayingChange={(playing) => console.log(playing)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
track | VinylTrack | 預設曲目 | 曲目資訊 { title, artist, hue? }，hue（0–360）決定標籤與氛圍光顏色 |
playing | boolean | — | 播放狀態；外部變更時唱盤同步啟停，元件內部按鈕仍可切換 |
onPlayingChange | (playing: boolean) => void | — | 按下播放/暫停鍵時回呼 |
rpm | number | 33.3 | 唱片轉速（RPM），影響自轉角速度 |
size | number | 224 | 唱片直徑（px） |
className | string | — | 透傳到最外層容器 |
可及性
- 播放/暫停按鈕提供
aria-label，狀態文字（正在播放／已暫停）隨播放同步更新 - 唱盤與唱針純視覺區域標記
aria-hidden，曲目資訊在資訊列以純文字呈現，避免重複朗讀 - 使用者系統開啟「減少動態效果」時：唱片不自轉、唱針直接定位不做彈簧、搓盤放開後不做慣性回穩，播放控制功能不受影響
- 搓盤為滑鼠／觸控的增強互動，鍵盤使用者可透過按鈕完成所有核心操作
- 唱盤閒置且完全靜止時自動停止 rAF 迴圈，滑出視口時亦暫停，不佔用效能