Audio Visualization On Canvas – Wave.js

Description:

Wave.js is a vanilla JavaScript audio visualization library which provides 12 creative audio visualization effects to bring more engagement to your visitor.

Visual Effects included:

wave
bars
bars_blocks
dualbars
orbs
dualbars_blocks
round_wave
shine
ring
flower
flower_blocks
star

How to use 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 element to place the visual effect.

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

Generate a visual effect from an audio object.

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

Generate a visual effect from a stream object.

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

Generate a visual effect from a file.

wave.fromFile(file name, options)

Enable/disable visual effects.

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

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

Specify an array of colors used in the visual effect.

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

Pause/play the visual effect.

wave.playStream();
wave.stopStream()

Fire an event when the fromFile function finishes.

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

Changelog:

V2.0.3 (03/29/2022)

update

V2.0.0 (03/18/2022)

update

V1.2.8 (03/11/2022)

update

V1.2.6 (09/26/2020)

update

V1.2.0 (07/01/2020)

add ability to play one audio source to multiple canvas

V1.1.2 (06/26/2020)

add helper functions to make more complete visuals

06/23/2020

JS Update

05/11/2020

JS Update

06/05/2019

Update wave.js

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

Audio Visualization On Canvas – Wave.js