🌊 audiobars

Ultra-lightweight, zero-dependency 60 FPS HTML5 Canvas audio spectrum visualization micro-library with 0KB external assets.

Live Demo: https://audiobars.vercel.app

---

⚡ Why audiobars?

Building real-time audio visualizers (equalizers, AI voice note waves, oscilloscope curves) for podcasts, music players, or voice note components usually requires complex Web Audio API setups, canvas scaling math, or importing heavy 50KB libraries.

audiobars is a < 2.2 KB gzipped zero-dependency micro-engine. Connect it to any HTML <audio> tag, Web Audio node, or microphone stream to render 60 FPS spectrum waves.

• 🎵 6 Spectrum Styles: Equalizers, waves, radial circles, voice note pulses, dots, and particles.
• 📐 High-DPI Retina Sharpness: Automatic devicePixelRatio scaling.
• ⚡ Zero Layout Shift: Renders on high-performance HTML5 2D Canvas.
• 💤 Zero Idle CPU Overhead: requestAnimationFrame render loop automatically pauses when audio stops.
• 🪶 Micro Footprint: Under 2.2 KB gzipped!
• ⚛️ React & Vanilla JS: Works everywhere (React <AudioBars>, Next.js App Router, Vue, Svelte, or plain JS).

---

📦 Installation

npm install audiobars
# or
pnpm add audiobars
# or
yarn add audiobars

---

🚀 Quick Start

1. Vanilla JS / TypeScript

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);

// Styles
audiobars.wave(canvas, audioEl);
audiobars.circle(canvas, audioEl);
audiobars.voice(canvas, audioEl);
audiobars.dots(canvas, audioEl);
audiobars.particles(canvas, audioEl);

2. React / Next.js App Router (<AudioBars> & useAudioBars)

Tip

audiobars is 100% SSR-safe. In Next.js App Router (Next.js 13/14/15/16), simply use 'use client' on components importing UI hooks.

'use client';

import React from 'react';
import { AudioBars } from 'audiobars/react';

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

---

🎛️ 6 Visualizer Styles

Style Preset	Geometry	Use Case
audiobars.bars()	Rounded gradient frequency equalizer bars	Audio players, podcasts, music dashboards
audiobars.wave()	Smooth sinusoidal oscilloscope curve	Sound wave previews, recording UI
audiobars.circle()	360° radial frequency pulse ring	Album art overlay, circular players
audiobars.voice()	Dynamic AI voice note pulse wave	Siri / OpenAI voice note style interfaces
audiobars.dots()	Spectrum dot matrix	Minimalist audio meters, HUDs
audiobars.particles()	Audio-reactive floating specks	Ambient background visualizers

---

📄 License

MIT © fullstackusama