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.
Interactive Graph Visualization For Messy Data Using D3.js | ggraph
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
Official Website(foobar404): Click Here
This superior jQuery/javascript plugin is developed by foobar404. For extra advanced usage, please go to the official website.
Be First to Comment