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.

[![build][badge-build]][link-project]
[![downloads][badge-downloads]][link-downloads]
[![storybook][badge-storybook]][link-storybook]

[Demo][link-storybook]

- Install
- Usage
- API

Install

``sh
npm install --save visualizer-micro
`

Usage

`js
import VisualizerMicro from 'visualizer-micro';

const vm = new VisualizerMicro();
`

$3

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

`js
if (!vm.supported) {
return
}

// load audio and get visualizer data

`

$3

`js
// using

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

vm.load(audioEl, onLoad);

`

or

`js
// using Audio class

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

vm.load(audio, onLoad);

`

$3

`js
// 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`][link-api].

[badge-downloads]: https://img.shields.io/npm/dw/visualizer-micro?label=npm&logo=npm
[badge-storybook]: https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg
[badge-build]: https://img.shields.io/gitlab/pipeline/likethemammal/visualizer-micro/master
[link-downloads]: https://www.npmjs.com/package/visualizer-micro
[link-storybook]: https://likethemammal.gitlab.io/visualizer-micro/master/storybook/
[link-project]: https://gitlab.com/likethemammal/visualizer-micro/
[link-api]: https://gitlab.com/likethemammal/visualizer-micro/-/blob/master/API.md

License

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