R
交互控件VoiceNote波形拖动倍速播放互斥

语音条

带可拖动波形与播放控制的语音消息条，支持倍速切换，多条的播放会互相打断。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/voice-note.tsx。

npx shadcn@latest add swamimalode07/rare-ui/voice-note

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

voice-note.tsx
import { VoiceNote } from "@/components/ui/voice-note"


export function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <VoiceNote accent="#fc4c01" duration={12} seed={7} speeds={[1, 1.5, 2]} />
      <VoiceNote accent="#fc4c01" duration={7} seed={21} size="sm" />
    </div>
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
srcstring—音频地址；省略时使用模拟播放。
durationnumber—时长（秒）。
waveformnumber[]—自定义波形振幅数组。
barsnumber—波形柱数量。
seednumber—随机波形种子，保证前后端一致。
playingboolean—受控播放状态。
onPlayingChange(playing: boolean) => void—播放状态回调。
onEnded() => void—播放结束回调。
accentstring—进度强调色。
size"sm" | "md" | "lg""md"尺寸。
seekablebooleantrue波形是否可拖动。
speedsnumber[]—可切换的倍速列表。