Wave.js

Audio visualizer library for javascript.

Installation

Install With CDN

<script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.js"></script>

Or NPM

npm i @foobar404/wave

Setup

If your using NPM:

import {Wave} from "@foobar404/wave";

Usage

let audioStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false })
let canvasElement = document.querySelector("#canvasElmId");
let wave = new Wave(audioStream, canvasElement);

// Simple example: add an animation
wave.addAnimation(new wave.animations.Wave());

// Intermediate example: add an animation with options
wave.addAnimation(new wave.animations.Wave({
    lineWidth: 10,
    lineColor: "red",
    count: 20
}));

// Expert example: add multiple animations with options
wave.addAnimation(new wave.animations.Square({
    count: 50,
    diamater: 300
}));

wave.addAnimation(new wave.animations.Glob({
    fillColor: {gradient: ["red","blue","green"], rotate: 45},
    lineWidth: 10,
    lineColor: "#fff"
}));

// The animations will start playing when the provided audio stream's frequencies are non-zero.

// 'wave.animations' is an object with all possible animations on it.

// Each animation is a class, so you have to new-up each animation when passed to 'addAnimation'

Contributing

1. Fork Wave.js repo.
2. Clone to your local computer.
3. Run "npm i" in the root folder to install dependencies.
4. Run "npm start" to start the code watcher.
5. Open the src folder and make a change to one of the src files.
6. Push to remote branch and create a pull request to the Wave.js main branch.

License

MIT