/Wave.js

audio visualizer library for javascript

Primary LanguageJavaScript

Wave.js

audio visualizer library for javascript

Live Example

Visuals

  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

Installation

Install With CDN

<script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/wave.js"></script>

Or

download the wave.js file from the root of this repository.

Setup

create a new wave object.

var wave = new Wave();

Usage

call one of the three main function on the wave object, fromFile, fromStream, fromElement.

var audio = document.getElementById("audio");
wave.fromElement(audio,"canvas_id",{wave:true});

Documentation

Functions

  • fromFile(file name,options)
    • file name can be a string of a local or external file, or a data url object.
    • options is a object of the options you want rendered.

  • fromElement(element,canvas id,options)
    • element is a audio element object, or the id of a audio element as a string.
    • canvas id is the id of the canvas you want to use as output. This is where the visualization will appear.
    • options is a object of the options you want rendered.

  • fromStream(stream,canvas id,options,muted(optional))
    • stream is a stream object, usually gotten from the getUserMedia() api.
    • canvas id is the id of the canvas you want to use as output. This is where the visualization will appear.
    • options is a object of the options you want rendered.
    • muted is an optional parameter that controls if the audio is played outloud or not. Defaults to false.

  • stopStream()
    • pauses the current visual from the fromStream function.

  • playStream()
    • plays the current stream visual.

Options

  • stroke: the thickness of the lines that are drawn. Default is 2.
  • colors: an array of colors used in the visual. Any valid css color is legal.
  • wave: boolean -- shows the wave visual effect if true. All boolean defaults are false.
  • ring: boolean -- shows the ring visual effect if true.
  • bars: boolean -- shows the bars visual effect if true.
  • bars_blocks: boolean -- shows the bars_blocks visual effect if true.
  • dualbars: boolean -- shows the dualbars visual effect if true.
  • dualbars_blocks: boolean -- shows the dualbars_blocks visual effect if true.
  • flower: boolean -- shows the flower visual effect if true.
  • flower_blocks: boolean -- shows the flower_blocks visual effect if true.
  • star: boolean -- shows the star visual effect if true.
  • round_wave: boolean -- shows the round_wave visual effect if true.
  • shine: boolean -- shows the shine visual effect if true.
  • orbs: boolean -- shows the orbs visual effect if true.

Events

  • onFileLoad
    • This event is triggered when the fromFile function finishes.
    • Set this variable equal to a function that takes one parameter image, which is a data uri as a png.

Example

var wave = new Wave();

var a = document.getElementById("audio");
var options = {stroke:4,colors:["#24292e","#547ee2"],star:true};

wave.fromElement(a,"out_canvas",options);

Full Example

<html>
   <head></head>
   <body>
   
      <canvas id="output" height="500" width="500"></canvas>   
   
      <script src="https://cdn.jsdelivr.net/gh/PiethonCoder/wave.js/wave.js"></script>
      <script>
         var wave = new Wave();
         
         navigator.mediaDevices.getUserMedia({audio:true})
         .then(function(stream) {
            wave.fromStream(stream,"output",{shine:true,colors:["pink","blue"]});
         })
         .catch(function(err) {
            console.log(err.message)
         });
      </script>
   </body>
</html>