audiobars

$ npm install audiobars

Ultra-lightweight, 60 FPS HTML5 Canvas audio spectrum visualizer. Connects to HTML audio tags, Web Audio nodes, or microphone streams with zero layout shift and 0 idle CPU overhead.

VISUALIZER STYLES MATRIX

Real-time 60 FPS spectrum visualizer canvas presets

audiobars.bars() EQUALIZER

audiobars.wave() OSCILLOSCOPE

audiobars.circle() RADIAL RING

audiobars.voice() AI VOICE NOTE

audiobars.dots() SPECTRUM MATRIX

audiobars.particles() AURA SPECKS

VISUALIZER LABORATORY

Select visualizer styles and preview live synthetic frequency motion

VISUALIZER STYLE

GENERATED CODE

import { audiobars } from 'audiobars';

const canvas = document.querySelector('#spectrum-canvas');
const audioEl = document.querySelector('#audio-player');

// Attach 60 FPS spectrum visualizer
audiobars.bars(canvas, audioEl, {
  colors: ['#6366f1', '#06b6d4', '#38bdf8'],
  idleMotion: true
});

INTEGRATION EXAMPLES

Vanilla JS, React 18/19, and Next.js App Router

VANILLA JS / TYPESCRIPT

import { audiobars } from 'audiobars';

const canvas = document.querySelector('#my-canvas');
const audioEl = document.querySelector('#audio-tag');

// Equalizer bars
audiobars.bars(canvas, audioEl);

// Voice note wave
audiobars.voice(canvas, audioEl);

REACT / NEXT.JS APP ROUTER

'use client';

import { AudioBars } from 'audiobars/react';

export function VoiceNotePlayer() {
  return (
    <AudioBars 
      style="voice" 
      colors={['#38bdf8', '#818cf8', '#a855f7']} 
    />
  );
}