Skip to content

🎵 Waveform audio visualizer for the HTML5 canvas.

License

Notifications You must be signed in to change notification settings

mathiasvr/audio-oscilloscope

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

oscilloscope

npm downloads dependencies license

Waveform audio visualizer for the HTML5 canvas.

wave

install

Import the module and bundle it for the browser with your favorite module bundler,

$ npm install oscilloscope

or include it directly in your HTML:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

example

var Oscilloscope = require('oscilloscope')

var audioContext = new window.AudioContext()

// create source from html5 audio element
var source = audioContext.createMediaElementSource(audioElement)

// attach oscilloscope
var scope = new Oscilloscope(source)

// start default animation loop
scope.animate(canvas.getContext("2d"))

See the examples folder for more details on how to customize the animation.

usage

scope = new Oscilloscope(source [, { fftSize: 2048 }])

Supply an AudioNode as source.

Optionally set the fftSize property of the internal AnalyzerNode. This can be used to adjust the smoothness or resolution of the animated oscilloscope.

For more control supply an AnalyzerNode as source.

scope.draw(context [, x, y, width, height])

Draw oscilloscope to a canvas context, and optionally set position and dimensions.

scope.animate(context [, x, y, width, height])

Start a basic animation loop that redraws the oscilloscope using the .draw() method.

scope.stop()

Stop the animation loop started by the .animate() method.