A reusable audio visualization component that creates animated circles modulated by audio input
npm install @nobbymcg/audiovisualisercircle-player.html - Audio file player with controls
circle-freq.html - Frequency-based visualization
circle.html - Basic circle visualization
audiovisualiser.js and include it in your HTML:
html
`
$3
`html
`
$3
`bash
npm install audiovisualiser
`
`javascript
import AudioVisualiser from 'audiovisualiser';
`
Quick Start
$3
`html
Audio Visualiser
`
API Reference
$3
`javascript
new AudioVisualiser(canvasId, options)
`
Parameters:
- canvasId (string): ID of the canvas element to render to
- options (object, optional): Configuration options
Options:
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| width | number | 500 | Canvas width in pixels |
| height | number | 500 | Canvas height in pixels |
| baseRadius | number | 150 | Base radius of the circles |
| sineAmplitude | number | 25 | Amplitude of the sine wave modulation |
| sineFrequency | number | 10 | Number of "petals" on the first circle |
| sineFrequency2 | number | 6 | Number of "petals" on the second circle |
$3
#### connectControls(controlIds)
Connect the visualiser to HTML control elements for interactive manipulation.
`javascript
visualiser.connectControls({
rotationSpeed: 'rotationSpeed', // Input for first circle rotation speed
rotationSpeed2: 'rotationSpeed2', // Input for second circle rotation speed
fade: 'fade', // Range input for trail fade
fadeValue: 'fadeValue', // Element to display fade value
color1: 'color1', // Color picker for first circle
color2: 'color2', // Color picker for second circle
bgColor: 'bgColor', // Color picker for background
opacity1: 'opacity1', // Range input for first circle opacity
opacity1Value: 'opacity1Value', // Element to display opacity1 value
opacity2: 'opacity2', // Range input for second circle opacity
opacity2Value: 'opacity2Value', // Element to display opacity2 value
fileInput: 'fileInput', // File input for audio files
audioPlayer: 'audioPlayer', // Audio element for playback
recordBtn: 'recordBtn' // Button to toggle microphone
});
`
#### startAnimation()
Starts the visualization animation loop.
`javascript
visualiser.startAnimation();
`
#### stopAnimation()
Stops the animation and resets to static state.
`javascript
visualiser.stopAnimation();
`
#### toggleRecording()
Toggles microphone recording on/off.
`javascript
visualiser.toggleRecording();
`
#### destroy()
Cleans up all resources (audio context, streams, animation loops).
`javascript
visualiser.destroy();
`
$3
The visualiser comes with these default settings (can be overridden via connectControls):
`javascript
{
rotationSpeed: 8, // seconds per revolution
rotationSpeed2: 12, // seconds per revolution for second circle
fade: 0.3, // trail fade amount
color1: '#2563eb', // first circle color (blue)
color2: '#a02ced', // second circle color (purple)
bgColor: '#f7f7f9', // background color (light gray)
opacity1: 0.1, // first circle opacity
opacity2: 0.05 // second circle opacity
}
`
Advanced Example
Complete example with all controls:
`html
Advanced Audio Visualiser
`
How It Works
AudioVisualiser uses the Web Audio API to analyze audio in real-time:
1. Dual Analyzers: Uses two analyzers with different FFT sizes:
- Fast analyzer (2048): ~1/32 second window for quick response
- Slow analyzer (8192): ~1/8 second window for smooth, averaged response
2. RMS Calculation: Calculates Root Mean Square (RMS) values from time domain data to determine audio intensity
3. Sine Wave Modulation: Creates petal patterns using radius = baseRadius + amplitude cos(frequency angle + rotation)`