🎧 Meter Madness

A powerful, customizable audio visualization suite for Svelte applications.

🚀 Overview

Meter Madness provides beautiful, professional-grade audio metering and visualization components for web applications. Whether you're building a DAW, an audio player, or any application that needs to visualize audio data, Meter Madness offers a comprehensive suite of components to meet your needs.

🔗 Latest Version: This component evolved into a standalone package. Check out the latest version:

• Demo: https://svelte-audio-meter-suite.vercel.app
• Repo: https://github.com/sequencefilm/svelte-audio-meter-suite

✨ Features

• Multiple Meter Types:

  • RetroMeter - Classic VU meter with vintage aesthetics
  • ProMeter - Broadcast-standard meter with peak hold and precise scaling
  • MiniMeter - Compact meters in both vertical and horizontal orientations
  • TestMeter - Advanced meter with comprehensive testing capabilities

• Audio Visualizations:

  • Oscilloscope - Real-time waveform display with multiple visualization styles
  • Interactive Waveform - Zoomable, seekable audio file visualization

• Customization:

  • Multiple color palettes (Default, Retro RGB, Letterboxd, Neon, Pastel, Synthwave, Grayscale)
  • Adjustable meter ballistics (attack/release)
  • Configurable warning and clipping thresholds
  • Various visual styles for both meters and waveforms

• Audio Processing:

  • Support for mono and stereo audio sources
  • Real-time metering from audio elements or WebAudio API sources
  • RMS, peak, and average level measurement algorithms

🛠️ Technical Details

The library leverages the Web Audio API to provide high-performance audio analysis and visualization:

• Uses AnalyserNode for real-time frequency and time-domain analysis
• Supports channel splitting for independent left/right channel metering
• Implements professional-grade ballistics with configurable attack/release times
• Provides utilities for audio level conversion (amplitude to dB, normalization)

📊 Components

Meters

• RetroMeter: Classic VU-style meter with needle animation
• ProMeter: Professional broadcast-style meter with precise dB scaling
• MiniMeterVertical: Compact vertical meter for space-constrained UIs
• MiniMeterHorizontal: Compact horizontal meter
• TestMeter: Comprehensive meter with advanced testing features

Visualizations

• Oscilloscope: Real-time waveform display with multiple visualization modes

  • Styles: classic, dots, bars, vector
  • Rendering: raw, interpolated, FFT
  • Adjustable persistence, resolution, and grid options

• InteractiveWaveform: Audio file waveform visualization

  • Styles: classic, minimal, blocks, points
  • Algorithms: peak, RMS, average
  • Zoom capabilities and interactive playhead

🎨 Customization Options

• Colors:

  • Independent safe, warning, and clip level colors
  • Multiple built-in color palettes
  • Custom background and label colors

• Metering Parameters:

  • Adjustable clip level (default: -3dB)
  • Adjustable warning level (default: -12dB)
  • Configurable minimum dB (default: -48dB)
  • Attack time (default: 10ms)
  • Release time (default: 100ms)
  • Peak hold duration (default: 1000ms)
  • Clipping indicator duration (default: 3000ms)

• Visual Styles:

  • Multiple waveform visualization styles
  • Adjustable line width, opacity, and grid settings
  • Various rendering algorithms for different visual effects

🚀 Getting Started

<script lang="ts">
	import { RetroMeter, Oscilloscope } from '@meter-madness/components';
	import { onDestroy } from 'svelte';

	let audioContext: AudioContext;
	let analyser: AnalyserNode;
	let audioElement: HTMLAudioElement;

	// Set up audio context and analyzer
	function setupAudio() {
		audioContext = new AudioContext();
		audioElement = new Audio('/path/to/audio.mp3');
		const source = audioContext.createMediaElementSource(audioElement);
		analyser = audioContext.createAnalyser();

		source.connect(analyser);
		analyser.connect(audioContext.destination);

		audioElement.play();
	}

	onDestroy(() => {
		if (audioContext) audioContext.close();
	});
</script>

<button on:click={setupAudio}>Start Audio</button>

<div class="meters">
	<RetroMeter
		{analyser}
		clipLevel={-3}
		warnLevel={-12}
		dbMin={-48}
		attackTime={10}
		releaseTime={100}
		colors={{
			safe: '#46A758',
			warning: '#FFC53D',
			clip: '#E54D2E'
		}}
	/>

	<Oscilloscope {analyser} visualStyle="classic" renderAlgorithm="raw" persistence={0.5} />
</div>

📚 API Reference

Common Props

Most meter components share these common properties:

Prop	Type	Default	Description
analyser	AnalyserNode	null	WebAudio analyser node
leftAnalyser	AnalyserNode	null	Left channel analyser for stereo monitoring
rightAnalyser	AnalyserNode	null	Right channel analyser for stereo monitoring
clipLevel	number	-3	Level (dBFS) at which clipping is indicated
warnLevel	number	-12	Level (dBFS) at which warning is indicated
dbMin	number	-48	Minimum dB level to display
colors	MeterColors	{ safe: '#46A758', warning: '#FFC53D', clip: '#E54D2E' }	Color scheme
attackTime	number	10	Attack time in ms
releaseTime	number	100	Release time in ms
peakHold	number	1000	Peak hold time in ms

🔒 License

MIT License

🙏 Acknowledgments

• Inspired by professional audio metering standards and practices
• Built with Svelte and TypeScript
• Utilizes the Web Audio API for real-time audio analysis