oscilloscope

Waveform audio visualizer for the HTML5 canvas.

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/oscilloscope@1.x/dist/oscilloscope.min.js"></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. 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.