A lightweight, customizable library for generating audio waveform visualizations using HTML Canvas
- Customizable colors, bar width, and spacing
- Vanilla JS functions for non-React projects
Usage Example
// Example 1: Basic waveform in container
const basicWaveform = SoundSkyWaveform.createWaveformInContainer({
container: '#basic-waveform',
backgroundColor: '#0f172a',
waveColor: 'rgba(255, 255, 255, 0.7)'
});
document.getElementById('regenerate-basic').addEventListener('click', function() {
basicWaveform.regenerate();
});
// Example 2: Customizable waveform
const customWaveform = SoundSkyWaveform.createWaveformInContainer({
container: '#custom-waveform',
backgroundColor: '#0f172a',
waveColor: 'rgba(255, 255, 255, 0.7)',
barWidth: 2,
gap: 3
});
document.getElementById('regenerate-custom').addEventListener('click', function() {
customWaveform.regenerate();
});
document.getElementById('apply-colors').addEventListener('click', function() {
const bgColor = document.getElementById('bg-color').value;
const waveColor = document.getElementById('wave-color').value;
customWaveform.updateOptions({
backgroundColor: bgColor,
waveColor: waveColor
});
});
// Example 3: Using existing canvas
const existingCanvas = document.getElementById('existing-canvas');
const existingWaveform = SoundSkyWaveform.createWaveform({
canvas: existingCanvas,
backgroundColor: '#1e293b',
waveColor: 'rgba(59, 130, 246, 0.7)',
barWidth: 4,
gap: 2
});
document.getElementById('regenerate-existing').addEventListener('click', function() {
existingWaveform.regenerate();
});
// Example 4: Single waveform example
console.log("SoundSkyWaveform loaded:", SoundSkyWaveform !== undefined);
const waveform = SoundSkyWaveform.createWaveformInContainer({
container: '#waveform',
backgroundColor: '#0f172a',
waveColor: 'rgba(255, 255, 255, 0.7)',
barWidth: 3,
gap: 4
});
document.getElementById('regenerate').addEventListener('click', function() {
waveform.regenerate();
});| Option | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | "#0f172a" | Background color of the canvas |
| waveColor | string | "rgba(255, 255, 255, 0.7)" | Color of the waveform bars |
| barWidth | number | 3 | Width of each bar in pixels |
| gap | number | 4 | Gap between bars in pixels |
| minHeight | number | 5 | Minimum height of bars (percentage) |
| maxHeight | number | 70 | Maximum height of bars (percentage) |
| mirror | boolean | true | Whether to mirror the waveform vertically |
| randomize | boolean | true | Whether to randomize bar heights |
| customHeights | number[] | [] | Custom array of heights to use instead of random generation |