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.

Demonstration

Download

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!

<style>
    #oscilloscope {
        width: 400px;
        height: 200px;
    }
</style>
            

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');

sineWave.connect(myOscilloscope);
myOscilloscope.connect(context.destination);

sineWave.start(0);

Ch-ch-ch-ch-changes

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;

Super.

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