Utilização

import { AudioWavePlayer } from "@convertcompany/ui/audio";

Adicione e customize o css para as ondas do áudio

:root{
  --color-audio-wave: 227, 227, 229;
}
.dark {
  --color-audio-wave: 31, 38, 41;
}

Funcionalidades

• WaveSurfer.js: Usa a biblioteca WaveSurfer.js para renderizar a forma de onda
• Interatividade: Clique na onda para navegar para diferentes posições
• Hover: Efeito de hover com linha indicadora
• Cores dinâmicas: Adapta-se ao tema atual usando CSS variables

Opções do WaveSurfer

O componente aceita todas as opções do WaveSurfer.js, exceto container e media que são gerenciados internamente, consulte toda documentação clicando aqui

waveSurferOptions={{
  height: 24,                 // Altura da onda
  barWidth: 3,                // Largura das barras
  barGap: 2.5,                // Espaçamento entre barras
  cursorWidth: 3,             // Largura do cursor
  barRadius: 3,               // Raio das barras
  waveColor: "rgb(...)",      // Cor da onda
  progressColor: "rgb(...)",  // Cor do progresso
  interact: true,             // Interatividade
}}

Exemplos

Player básico

Player de áudio com visualização de onda e controles básicos.

Sem controle de velocidade

Player sem o botão de controle de velocidade.

Sem tempo atual

Player sem exibição do tempo atual.

Com opções customizadas do WaveSurfer

Player com configurações customizadas da visualização de onda.

Com referência forwardRef

Player com referência para controle externo.

Player em formulário

Exemplo de uso do player em um contexto de formulário.

Props