tennisonchan / audio-visualizer

A plug-and-play audio visualizer

Audio Visualizer

A plug-and-play audio visualizer

DEMO

Frequency

Wave

Usage

const visualizer = new AudioVisualizer('canvasId', {
  // optional
  type: 'wave',
  width: 700, height: 500,
  lineWidth: 2,
  backgroundColor: 'rgb(25, 25, 25)'
  strokeStyle: 'rgb(255, 255, 255)'
});

// Connect visualizer to an AnalyserNode which connected to the audio source
function getMediaStream (stream) {
  let source = audioContext.createMediaStreamSource(stream);
  let analyser = new AnalyserNode(audioContext);

  source.connect(analyser);
  visualizer.connect(analyser);
}