Visualize audio with the web-audio-api and svg

I've recently given a presentation about the web-audio-api and web-midi-api. For this talk I wanted to visualize audio waves to see how certain audio-nodes impacted these audio waves.

To do this, I created a small javaScript plugin to create an oscilloscope. You can find this plugin on github, and see an example here.

To visualize an audio wave, create one, for example with an oscillatorNode. Second create a new oscilloscope instance and connect the oscillator to the oscilloscope.

// Create an audio-context
var audioContext = new window.AudioContext(),  
    oscillator = audioContext.createOscillator();
    oscillator.type = 'sine';
    oscillator.frequency.value = 400;

// Create an Oscilloscope instance
//   Parameters:
//     - The container in which the oscilloscope gets created
//     - an optional audio-context on which the oscilloscope creates an analyser-node,
//          and can connect to the destination.
//          If no audio-context is specified, a new one will be created created.
var oscilloscope = new Oscilloscope('.js-oscilloscope', audioContext);

// Connect the oscillator-node to the oscilloscope

// Start the oscilloscope

More info, an example and documentation about oscilloscope.js can be found here and the presentation can be found here.

Sam Bellen
Sam Bellen

I'm a software engineer at @madewithlove. I like playing around with the web-audio-api, and all things front-end related.