Awesome Open Source
Awesome Open Source


npm downloads dependencies license

Waveform audio visualizer for the HTML5 canvas.



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="[email protected]"></script>


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

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


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.


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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,065
html5-canvas (46
audio-visualizer (28
waveform (26

Find Open Source By Browsing 7,000 Topics Across 59 Categories