Chat Audio Player

Нативный аудио-плеер с play/pause, seek, time, volume и mute.

Вот текст, начитанный голосом:

0:000:00

import { ChatAudioPlayer } from "@/components/ui/chat-audio-player";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="w-full max-w-lg p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <p className="mb-2 text-sm">Вот текст, начитанный голосом:</p>
          <ChatAudioPlayer src="https://www.kozco.com/tech/piano2-CoolEdit.mp3" />
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-audio-player

Без внешних медиа-библиотек — обёрнут вокруг встроенного <audio>.

Использование

import { ChatAudioPlayer } from "@/components/ui/chat-audio-player";
 
// URL
<ChatAudioPlayer src="https://example.com/voice.mp3" />
 
// base64 (от моделей через AI SDK)
<ChatAudioPlayer base64={audio.base64} mediaType="audio/mp3" />
 
// Кастомная композиция controls
<ChatAudioPlayer src="…">
  <ChatAudioPlayerPlayButton />
  <ChatAudioPlayerSeek />
  <ChatAudioPlayerTime />
  <ChatAudioPlayerDuration />
  <ChatAudioPlayerMuteButton />
  <ChatAudioPlayerVolume />
</ChatAudioPlayer>

Хук

import { useChatAudioPlayerContext } from "@/components/ui/chat-audio-player";
 
const { playing, current, duration, togglePlay, seek } =
  useChatAudioPlayerContext();

Используй для построения нестандартных control bar'ов (waveform-визуализация, чаптеры).

На этой странице

Установка Использование Хук