AudioUpload é um componente especializado para upload de arquivos de áudio com funcionalidades de drag and drop, validação automática e reprodução de preview. Oferece uma interface intuitiva para seleção e envio de arquivos de áudio com feedback visual e controles de reprodução.tsx
import { AudioUpload } from "@arkyn/components";
Ou arraste e solte um arquivo de áudio aqui
tsx
<AudioUploadname="audio"action="/api/upload"label="Selecione um arquivo de áudio"/>
Arraste seu arquivo de áudio aqui
tsx
<AudioUploadname="podcast"action="/api/upload/podcast"label="Arquivo de Podcast"showAsteriskacceptAudio="audio/mp3,audio/wav"selectAudioButtonText="Escolher Áudio"changeAudioButtonText="Trocar Áudio"dropAudioText="Arraste seu arquivo de áudio aqui"onChange={(url) => console.log("Podcast uploaded:", url)}/>
Arraste o arquivo MP3 aqui
Arraste a gravação aqui
tsx
{/* Upload de música MP3 */}<AudioUploadname="backgroundMusic"action="/api/upload/music"label="Música de Fundo (MP3)"acceptAudio="audio/mp3"selectAudioButtonText="Selecionar Música"dropAudioText="Arraste o arquivo MP3 aqui"/>;{/* Upload de gravação de voz */}<AudioUploadname="voiceNote"action="/api/upload/voice"label="Nota de Voz"acceptAudio="audio/wav,audio/mp3,audio/m4a"selectAudioButtonText="Escolher Gravação"dropAudioText="Arraste a gravação aqui (WAV, MP3 ou M4A)"/>;{/* Múltiplos formatos de áudio */}<AudioUploadname="audioFile"action="/api/upload/audio"label="Arquivo de Áudio"acceptAudio="audio/*"selectAudioButtonText="Selecionar Áudio"/>;
Ou arraste e solte um arquivo de áudio aqui
tsx
<AudioUploadname="audio"action="/api/upload"label="Upload Temporariamente Indisponível"disabled/>
00:00
00:00
tsx
<AudioUploadname="existingAudio"action="/api/upload"label="Áudio Atual"defaultValue="/path/to/existing-audio.mp3"changeAudioButtonText="Substituir Áudio"/>
json
// Sucesso (configuração padrão){"url": "https://example.com/uploads/audio123.mp3"}// Sucesso (configuração customizada){"url": "https://example.com/audio/podcast-episode.mp3","fileName": "podcast-episode.mp3","duration": 1800,"size": 15728640}// Erro{"error": "Arquivo de áudio muito grande. Máximo permitido: 50MB"}
javascript
// server.jsapp.post("/api/upload/audio", upload.single("file"), (req, res) => {try {if (!req.file) {return res.status(400).json({error: "Nenhum arquivo de áudio foi enviado",});}// Validar tipo de arquivoif (!req.file.mimetype.startsWith("audio/")) {return res.status(400).json({error: "Arquivo deve ser um formato de áudio válido",});}// Validações de tamanhoconst maxSize = 50 * 1024 * 1024; // 50MBif (req.file.size > maxSize) {return res.status(400).json({error: "Arquivo de áudio muito grande. Máximo: 50MB",});}// Processar upload de áudio (S3, local, etc.)const audioUrl = processAudioUpload(req.file);// Extrair metadata (opcional)const audioMetadata = extractAudioMetadata(req.file);res.json({url: audioUrl,fileName: req.file.originalname,size: req.file.size,duration: audioMetadata.duration,format: audioMetadata.format,});} catch (error) {res.status(500).json({error: "Erro interno do servidor",});}});
name - string (obrigatório)
Nome do campo para manipulação de formulárioaction - string (obrigatório)
URL do endpoint onde o arquivo será enviadodisabled - boolean (padrão: false)
Se o upload de arquivo está desabilitadolabel - string
Texto do label a ser exibido acima da área de uploadshowAsterisk - boolean (padrão: false)
Se deve exibir asterisco no label para campos obrigatórioschangeAudioButtonText - string (padrão: "Trocar arquivo de áudio")
Texto do botão para trocar/substituir um arquivo já enviadoselectAudioButtonText - string (padrão: "Selecionar arquivo de áudio")
Texto do botão para selecionar um arquivodropAudioText - string (padrão: "Ou arraste e solte um arquivo de áudio aqui")
Texto exibido na área de drop zonemethod - string (padrão: "POST")
Método HTTP para a requisição de uploadfileName - string (padrão: "file")
Nome do campo no FormData para o arquivofileResponseName - string (padrão: "url")
Nome da propriedade no objeto de resposta que contém a URL do arquivoacceptAudio - string (padrão: "audio/*")
Tipos de arquivo de áudio aceitos pelo input (ex: "audio/mp3", "audio/wav")onChange - (url?: string) => void
Função callback chamada quando o upload é concluído com sucessodefaultValue - string
URL de áudio padrão a ser exibida no componenteaudio/mp3 - Formato mais comum para músicaaudio/wav - Alta qualidade, sem compressãoaudio/m4a - Formato Apple, boa qualidadeaudio/ogg - Formato aberto, boa compressãoaudio/flac - Sem perdas, alta qualidadeaudio/webm - Formato web modernoaudio/aac - Boa qualidade e compressãotsx
// Para músicaacceptAudio = "audio/mp3,audio/wav,audio/flac";// Para podcast/falaacceptAudio = "audio/mp3,audio/wav,audio/m4a";// Para gravação webacceptAudio = "audio/webm,audio/wav,audio/mp3";// Para qualquer áudioacceptAudio = "audio/*";
error na respostauseFormactionacceptAudio para restringir formatosonChange para feedbackacceptAudio conforme necessidade