Wavy Jones

Need a simple way of showing what your audio looks like in real time? Already have a project that uses the Web Audio API? Wavy Jones is just the thing.

You can just connect Wavy Jones just as you would any other Audio Node, with the side-effect of having a nice oscilloscope that you can control the look of.



The best way to start using Wavy Jones is to grab it from GitHub

How to use

Wavy Jones relies on a couple of things, namely:

  1. Your project must use the Web Audio API
  2. You know who Greg Evigan is

Step 1. SRC-ya!

Firsty, you'll need to reference Wavy Jones after downloading it by doing something like this:

<script src="/wavy-jones.js"></script>

Step 2. Make space!

You'll want somewhere to show your oscillator, so just create and empty div and give it an id like so:

<div id="oscilloscope"></div>

Don't forget get to give it a height and width!

    #oscilloscope {
        width: 400px;
        height: 200px;

Step 3. Gonna get myself connected

Wavy Jones is basically a normal Audio Analyser node wearing a sparkly jacket. This means you can connect it up just like you would any other audio node.

var context = new AudioContext(),
    sineWave = context.createOscillator(),
    myOscilloscope = new WavyJones(context, 'oscilloscope');




It's easy to customise Wavy. You can change the thickness and colour of the line by doing something like this:

oscilloscope.lineColor = '#EE0000';
oscilloscope.lineThickness = 3;


Need help or have an idea to make WJ better?

No problem, just give me a shout on Twitter.

Find this useful? Buy me a drink with bitcoins!

Donate Bitcoins