audio visualizer library for javascript
- wave
- bars
- bars_blocks
- dualbars
- orbs
- dualbars_blocks
- round_wave
- shine
- ring
- flower
- flower_blocks
- star
<script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/wave.js"></script>
create a new wave object.
var wave = new Wave();
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});
- 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.
- 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.
- 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.
var wave = new Wave();
var a = document.getElementById("audio");
var options = {stroke:4,colors:["#24292e","#547ee2"],star:true};
wave.fromElement(a,"out_canvas",options);
<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>