oziAudio

Versión: 3.0.0 — Actualizado: 2026-05-27

Descripción

Componente declarativo de audio para interfaces web. Soporta tres modos de operación — player, recorder y full — todos activados mediante un atributo HTML sobre un elemento contenedor. Integra reproducción de archivos de audio, grabación por micrófono, vista previa del contenido grabado y envío automático al backend mediante oziLoadData.

El visual es completamente independiente de frameworks CSS — toda la apariencia se controla mediante tokens CSS --ozi-audio-* en :root, lo que permite una personalización total sin tocar el código del plugin. Los iconos son archivos SVG externos cargados bajo demanda con caché automático.

Ejemplos

[1] Modo player

Reproducción de audio con barra de progreso, volumen y control de velocidad.

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

Player sin volumen ni velocidad:

<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

Grabación por micrófono con temporizador en tiempo real, vista previa y envío al backend.

<div
    data-ozi-audio="recorder"
    data-ozi-audio-save-url="/api/audio/guardar"
    data-ozi-audio-save-field="grabacion">
</div>

Recorder sin vista previa:

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

[3] Modo full — player + grabador

Player y grabador combinados en el mismo componente. Permite reproducir un audio base y grabar una nueva versión.

<div
    data-ozi-audio="full"
    data-ozi-audio-url="/storage/audio/base.mp3"
    data-ozi-audio-title="Grabación"
    data-ozi-audio-save-url="/api/audio/guardar"
    data-ozi-audio-save-field="audio_file">
</div>

[4] Personalización mediante tokens CSS

/* Tema oscuro */
.mi-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;
}

Características

• Tres modos — player, recorder y full
• Player completo — barra de progreso, volumen, silencio y velocidad
• Grabador — micrófono vía MediaRecorder con temporizador en tiempo real
• Vista previa — player nativo tras grabar para revisión antes de guardar
• Envío automático — backend vía oziLoadData
• Pausa automática — pausa instancias concurrentes al iniciar reproducción
• MutationObserver — detecta e inicializa elementos insertados en el DOM
• Iconos SVG externos — cargados bajo demanda con caché, reemplazables por proyecto
• Tokens CSS — apariencia 100% personalizable vía --ozi-audio-*

Atributos HTML

[1] Modo de Operación

[2] Configuración del Player

[3] Configuración del Grabador

[4] Velocidades de Reproducción

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

Tokens CSS

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

    /* Contenedor */
    --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ón grabar */
    --ozi-audio-record-bg: #dc3545;
    --ozi-audio-record-bg-hover: #bb2d3b;
    --ozi-audio-record-text: #ffffff;

    /* Botón guardar */
    --ozi-audio-save-bg: #198754;
    --ozi-audio-save-bg-hover: #157347;
    --ozi-audio-save-text: #ffffff;

    /* Iconos */
    --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

$('#miAudio').on('ozi:audio-recorded', function(e, payload) {
    console.log(payload.duration);  // duración en segundos
    console.log(payload.mimeType);  // ej: audio/webm
    console.log(payload.size);      // tamaño en bytes
    console.log(payload.file);      // objeto File
});

API Pública