Audio Visualization On Canvas – Wave.js

Category: Javascript | March 29, 2022
Views Total:3,262 views
Official Page:Go to website
Last Update:March 29, 2022


Audio Visualization On Canvas – Wave.js


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:

  1. wave
  2. bars
  3. bars_blocks
  4. dualbars
  5. orbs
  6. dualbars_blocks
  7. round_wave
  8. shine
  9. ring
  10. flower
  11. flower_blocks
  12. 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=""></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, {

Pause/play the visual effect.


Fire an event when the fromFile function finishes.

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


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


  • JS Update


  • JS Update


  • Update wave.js

You Might Be Interested In:

Leave a Reply