Audio Visualization On Canvas – Wave.js

Category: Javascript | September 26, 2020
Author:foobar404
Views Total:370 views
Official Page:Go to website
Last Update:September 26, 2020
License:MIT

Preview:

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:

  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="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:

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

You Might Be Interested In:


Leave a Reply