oziAudio

Versão: 2.6.6 — Atualizado em: 2026-04-25

Descrição

Componente declarativo de áudio para interfaces web. Suporta três modos de operação — player, recorder e full — todos ativados via atributo HTML sobre um elemento contêiner. Integra reprodução de arquivos de áudio, gravação via microfone, preview do conteúdo gravado e envio automático ao backend via oziLoadData.

O visual é completamente independente de frameworks CSS — toda a aparência é controlada por tokens CSS --ozi-audio-* no :root, permitindo customização total sem tocar no código do plugin. Os ícones são arquivos SVG externos carregados sob demanda com cache automático.

Exemplos

[1] Modo player

Reprodução de áudio com barra de progresso, volume e controle de velocidade.

<div
    data-ozi-audio="player"
    data-ozi-audio-url="/storage/audio/podcast.mp3"
    data-ozi-audio-title="Episódio 01">
</div>

Player sem volume e sem velocidade:

<div
    data-ozi-audio="player"
    data-ozi-audio-url="/storage/audio/intro.mp3"
    data-ozi-audio-volume="false"
    data-ozi-audio-speed="false">
</div>

[2] Modo recorder

Gravação via microfone com timer em tempo real, preview e envio ao backend.

<div
    data-ozi-audio="recorder"
    data-ozi-audio-save-url="/api/audio/salvar"
    data-ozi-audio-save-field="gravacao">
</div>

Recorder sem preview:

<div
    data-ozi-audio="recorder"
    data-ozi-audio-preview="false"
    data-ozi-audio-save-url="/api/audio/salvar">
</div>

[3] Modo full — player + gravador

Player e gravador combinados no mesmo componente. Permite reproduzir um áudio base e gravar uma nova versão.

<div
    data-ozi-audio="full"
    data-ozi-audio-url="/storage/audio/base.mp3"
    data-ozi-audio-title="Gravação"
    data-ozi-audio-save-url="/api/audio/salvar"
    data-ozi-audio-save-field="audio_file">
</div>

[4] Customização via tokens CSS

/* Tema escuro */
.meu-player {
    --ozi-audio-bg: rgba(30, 30, 30, 0.95);
    --ozi-audio-border: rgba(255, 255, 255, 0.08);
    --ozi-audio-color: #555;
    --ozi-audio-color-secondary: #7c3aed;
    --ozi-audio-text: #ccc;
}

Recursos

• Três modos — player, recorder e full
• Player completo — barra de progresso, volume, mudo e velocidade
• Gravador — microfone via MediaRecorder com timer em tempo real
• Preview — player nativo após gravar para revisão antes de salvar
• Envio automático — backend via oziLoadData
• Pausa automática — pausa instâncias concorrentes ao iniciar reprodução
• MutationObserver — detecta e inicializa elementos inseridos no DOM
• Ícones SVG externos — carregados sob demanda com cache, substituíveis por projeto
• Tokens CSS — visual 100% customizável via --ozi-audio-*

Atributos HTML

[1] Modo de Operação

[2] Configuração do Player

[3] Configuração do Gravador

[4] Velocidades de Reprodução

1x → 1.25x → 1.5x → 1.75x → 2x → 0.75x → 1x

Tokens CSS

:root {
    /* Cores */
    --ozi-audio-color: #b8b8b9;
    --ozi-audio-color-secondary: #ff7f50;
    --ozi-audio-text: #808080;
    --ozi-audio-text-secondary: #dfdfdf;

    /* Container */
    --ozi-audio-bg: rgba(255, 255, 255, 0.77);
    --ozi-audio-shadow: rgba(117, 108, 108, 0.22);
    --ozi-audio-border: rgba(255, 255, 255, 0.22);
    --ozi-audio-radius: 15px;
    --ozi-audio-padding: 8px 10px;
    --ozi-audio-width-min: 250px;
    --ozi-audio-width-max: 350px;

    /* Barras */
    --ozi-audio-timeline-height: 15px;
    --ozi-audio-volume-height: 7px;

    /* Botão record */
    --ozi-audio-record-bg: #dc3545;
    --ozi-audio-record-bg-hover: #bb2d3b;
    --ozi-audio-record-text: #ffffff;

    /* Botão save */
    --ozi-audio-save-bg: #198754;
    --ozi-audio-save-bg-hover: #157347;
    --ozi-audio-save-text: #ffffff;

    /* Ícones */
    --ozi-audio-icon-play-size: 20px;
    --ozi-audio-icon-volume-size: 18px;
    --ozi-audio-icon-record-size: 16px;
    --ozi-audio-icon-save-size: 14px;
}

Eventos

$('#meuAudio').on('ozi:audio-recorded', function(e, payload) {
    console.log(payload.duration);  // duração em segundos
    console.log(payload.mimeType);  // ex: audio/webm
    console.log(payload.size);      // tamanho em bytes
    console.log(payload.file);      // objeto File
});

API Pública