• Stars
    star
    635
  • Rank 68,407 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

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 audioElement = document.querySelector("#audioElmId");
let canvasElement = document.querySelector("#canvasElmId");
let wave = new Wave(audioElement, 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 element is played

// '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

Get involved! Check out the Contributing Guide for how to get started.

License

MIT