Audio Visualization On Canvas – Wave.js

Category: Javascript | June 5, 2019
Author: PiethonCoder
Views Total: 672
Official Page: Go to website
Last Update: June 5, 2019
License: MIT


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, {
  wave: boolean,
  ring: boolean,
  bars: boolean,
  bars_blocks: boolean,
  dualbars: boolean,
  dualbars_blocks: boolean,
  flower: boolean,
  flower_blocks: boolean,
  star: boolean,
  round_wave: boolean,
  shine: boolean,
  orbs: boolean

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, {



  • Update wave.js

You Might Be Interested In:

Leave a Reply