visualizer-micro

visualizer-micro.js

A micro library that simplifies retrieving audio data from a source using the Web Audio API. Used to create visualizers.

This is the wrapping needed to easily access the data directly from an AnalyserNode's getByteFrequencyData and getByteTimeDomainData methods.

Demo

• Install
• Usage
• API

Install

npm install --save visualizer-micro

Usage

import VisualizerMicro from 'visualizer-micro';

const vm = new VisualizerMicro();

1. Check for browser support

Before getting any data from the Web Audio API, check for browser support to make sure visualization is possible.

if (!vm.supported) {
  return
}

// load audio and get visualizer data

2. Load an Audio (or MediaStream) source

// using <audio/> element

const audioEl = document.getElementById('some-audio-el');
const onLoad = function() {
    // do something after the audio source has be loaded
};

vm.load(audioEl, onLoad);

or

// using Audio class

const audio = new Audio('some audio src');

vm.load(audio, onLoad);

3. Get data using getSpectrum() or getWaveform()

// onLoad

// vm.loaded; // returns true
audio.play();

setInterval(() => {
  const spectrum = vm.getSpectrum();

  spectrum.map((value, index) => {
    // animate something based on value
  });
}, 60/1000);

API

Full API reference can be found in API.md.

License

visualizer-micro by Chris Dolphin is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.