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.

How to make use of it:

Download and import the wave.js library into the HTML file.

<script src="./js/wave.js"></script>
<!-- Or from a CDN -->
<script src="https://cdn.jsdelivr.net/gh/PiethonCoder/wave.js/wave.js"></script>

Initialize the Wave.js library and we’re ready to go.

var wave = new Wave();

Create an HTML5 canvas component to position the visual impact.

<canvas id="wave"></canvas>

Generate a visual impact from an audio object.

var audio = document.getElementById("audio");
var canvas = document.getElementById("wave");
wave.fromElement(audio, canvas, {
// options here
});

Generate a visual impact from a stream object.

wave.fromStream(stream,canvas id,options,muted(optional))

Generate a visual impact from a file.

wave.fromFile(file name, options)

Enable/disable visual results.

wave.fromElement(audio, canvas, {
type: ["bars", "bars blocks", "big bars", "cubes", "dualbars", "dualbars blocks", "fireworks", "flower","flower blocks", "orbs", "ring", "rings", "round wave", "shine", "shine rings", "shockwave", "star","static", "stitches", "web", "wave" ]
});

Set the thickness of the lines.

wave.fromElement(audio, canvas, {
stroke: 2
});

Specify an array of colors used within the visual impact.

wave.fromElement(audio, canvas, {
colors:["#24292e","#547ee2"]
});

Pause/play a visual impact.

wave.playStream();
wave.stopStream()

Fire an event when the from file function finishes.

wave.onFileLoad = (image)=>{
//work with image as data uri
}

Audio Visualization On Canvas, Visualizations with Web Audio, Wave JS Plugin/Github

See Demo And Download

Demo
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.