Audio Visualizer Library - wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor.

Contribute

• Fork Wave. js repo.
• Clone to your local computer.
• Run ‘npm i‘ in the root folder to install dependencies.
• Run “npm start” to start the code monitor.
• Open the src folder and make a change to one of the src files.
• Push to a remote branch and generate a pull request to the master branch of Wave.js.

Must Read: A Tiny, Minimalistic JS Audio/Music/MP3 Player | microne

How to make use of it:

Install With CDN:

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

Or NPM

npm i @foobar404/wave

If you’re 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'

See Demo And Download

Official Website(foobar404): Click Here

This superior jQuery/javascript plugin is developed by foobar404. For extra advanced usage, please go to the official website.