CanvasWeb Audio API
Audio Visualizers
Create stunning real-time visualizations using microphone input data.
Getting Audio Data
JSVoice provides a simple hook to access the raw frequency or waveform data from the microphone. This is perfect for creating "Siri-like" bubbles or equalizers.
javascript
1// Start analyzing
2voice.startAmplitude((dataPoints) => {
3 // dataPoints is an array of 0-1 values representing volume/frequency
4 drawVisualizer(dataPoints);
5}, {
6 mode: 'bars', // or 'waveform'
7 barCount: 16 // quantity of data points
8});
9
10// Stop analyzing
11voice.stopAmplitude();Canvas Example
Here is a simple example of how to draw a bar chart visualizer on a canvas.
javascript
1const canvas = document.getElementById('waveform');
2const ctx = canvas.getContext('2d');
3
4voice.startAmplitude((bars) => {
5 // Clear canvas
6 ctx.clearRect(0, 0, canvas.width, canvas.height);
7
8 // Draw bars
9 const barWidth = canvas.width / bars.length;
10 bars.forEach((value, index) => {
11 const height = value * canvas.height;
12 const x = index * barWidth;
13 const y = canvas.height - height;
14
15 ctx.fillStyle = `hsl(${value * 120}, 70%, 50%)`;
16 ctx.fillRect(x, y, barWidth - 2, height);
17 });
18}, { mode: 'bars', barCount: 16 });