audio-visualizer-neon

Visualizador de audio para web con animaciones reactivas — Biblioteca ligera en JavaScript para visualizar audio en tiempo real usando Canvas 2D y Web Audio API. Soporta MP3, WebM, WAV y OGG. Vanilla JS, sin dependencias de framework — compatible con React, Vue, Angular, Svelte o HTML plano.

audio visualizer · JavaScript audio visualization · Web Audio API · real-time music visualizer · canvas audio spectrum · HTML5 audio visualizer

Características

• 🎵 6 estilos de visualización — Liquid Waveform, Circular Spectrum, Spectral Wave, Neon Equalizer, Blue Orb Ovals (3D), Circular Waves
• 🔊 Múltiples fuentes de audio — Elemento HTML <audio>, Blob o URL
• 📦 Configuración mínima — Funciona de inmediato
• 🎨 Efectos visuales — Canvas 2D y Three.js para 3D
• 🌐 Framework agnóstico — React, Vue, Angular, Svelte, vanilla JS
• 📱 Navegadores modernos — Chrome, Firefox, Safari, Edge
• 🌙 Tema claro — Fondos adaptados al modo claro del frontend

Instalación

npm install audio-visualizer-neon

O via CDN (build UMD):

<script src="https://unpkg.com/audio-visualizer-neon"></script>

O desde GitHub:

npm install github:sistsalcedo/audio-visualizer-neon

Inicio rápido

import { createAudioVisualizer } from 'audio-visualizer-neon';

const container = document.getElementById('visualizer-container');
const audio = document.querySelector('audio'); // o Blob, o URL

const visualizer = await createAudioVisualizer({
  container,
  audio,
  type: 'liquid-waveform',  // elige un estilo
});

visualizer.play();
visualizer.pause();
visualizer.stop();
visualizer.destroy();

Tipos de visualización

| Tipo | Descripción | |------|-------------| | liquid-waveform | Ondas fluidas con gradiente púrpura/azul | | circular-spectrum | Barras radiales con efecto neon | | spectral-wave | Ondas translúcidas estilo spectrogram | | neon-equalizer | Barras verticales tipo ecualizador | | blue-orb-ovals | Círculo 3D con amebas que reaccionan al audio (Three.js) | | circular-waves | Círculo con ondas en el contorno reactivas al sonido |

API Reference

createAudioVisualizer(options)

Crea e inicializa un visualizador de audio.

Parámetros:

| Opción | Tipo | Requerido | Descripción | |--------|------|-----------|-------------| | container | HTMLElement | Sí | Elemento DOM donde se renderiza | | audio | HTMLAudioElement \| Blob \| string | Sí | Fuente de audio — elemento, Blob o URL | | type | string | No | Tipo de visualización (default: 'liquid-waveform') | | visualizerOptions | object | No | Opciones adicionales para el visualizador |

Devuelve: Promise<VisualizerInstance>

Métodos de VisualizerInstance:

| Método | Descripción | |--------|-------------| | play() | Inicia reproducción y animación | | pause() | Pausa reproducción y animación | | stop() | Detiene y reinicia | | destroy() | Libera recursos y elimina el visualizador | | getAudioElement() | Devuelve el HTMLAudioElement subyacente (si aplica) |

Ejemplos de uso

Con elemento HTML audio

<audio id="my-audio" src="track.mp3"></audio>
<div id="viz"></div>

<script type="module">
  import { createAudioVisualizer } from 'audio-visualizer-neon';

  const viz = await createAudioVisualizer({
    container: document.getElementById('viz'),
    audio: document.getElementById('my-audio'),
    type: 'circular-waves',
  });
  viz.play();
</script>

Con URL

const visualizer = await createAudioVisualizer({
  container: document.getElementById('viz'),
  audio: 'https://example.com/audio.mp3',
  type: 'blue-orb-ovals',
});

Con archivo subido (Blob)

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const blob = e.target.files[0];
  const viz = await createAudioVisualizer({
    container: document.getElementById('viz'),
    audio: blob,
    type: 'liquid-waveform',
  });
  viz.play();
});

Con React

import { useEffect, useRef } from 'react';
import { createAudioVisualizer } from 'audio-visualizer-neon';

function AudioVisualizer({ audioUrl, type = 'liquid-waveform' }) {
  const containerRef = useRef(null);
  const vizRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current || !audioUrl) return;

    createAudioVisualizer({
      container: containerRef.current,
      audio: audioUrl,
      type,
    }).then((viz) => {
      vizRef.current = viz;
      viz.play();
    });

    return () => vizRef.current?.destroy();
  }, [audioUrl, type]);

  return <div ref={containerRef} style={{ width: '100%', height: 400 }} />;
}

Con Vue

<template>
  <div ref="containerRef" class="visualizer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { createAudioVisualizer } from 'audio-visualizer-neon';

const containerRef = ref(null);
let visualizer = null;

onMounted(async () => {
  if (containerRef.value) {
    visualizer = await createAudioVisualizer({
      container: containerRef.value,
      audio: props.audioUrl,
      type: 'circular-spectrum',
    });
    visualizer.play();
  }
});

onUnmounted(() => visualizer?.destroy());
</script>

<style scoped>
.visualizer { width: 100%; height: 400px; }
</style>

Desarrollo

# Clonar el repositorio
git clone https://github.com/sistsalcedo/audio-visualizer-neon.git
cd audio-visualizer-neon

# Instalar dependencias
npm install

# Ejecutar showcase interactivo
npm run dev

# Ejemplo mínimo vanilla
npm run dev:vanilla

# Compilar librería
npm run build

Formatos y navegadores

Formatos de audio: MP3, WebM, WAV, OGG

Navegadores: Chrome, Firefox, Safari, Edge (Web Audio API y Canvas soportados)

SEO y descubrimiento

Palabras clave: audio visualizer, visualizador de audio, JavaScript audio visualization, Web Audio API, music visualizer, audio spectrum, ecualizador web, canvas audio, real-time audio visualization, HTML5 audio, React audio visualizer, Vue audio, vanilla JS audio

Licencia

MIT — sistsalcedo

Enlaces

• Repositorio: github.com/sistsalcedo/audio-visualizer-neon
• npm: npmjs.com/package/audio-visualizer-neon