Skip to main content

Audio synthesis in the browser with WebAudio

Audio synthesis with WebAudio is easy. To prove it I'll get straight to the point...

(If you don't want to follow along via blog post, a working example project with code broken up into logical commits and releases is available here: https://github.com/wybiral/webaudio-example)

The first thing you need is an instance of AudioContext:

var ctx = new AudioContext();
var node = ctx.createGain();
node.connect(ctx.destination);


The "node" object is actually a gain node that you can use to adjust the audio level but you can ignore that for now. All I did was connect it to the AudioContext destination (our ouput).

Now you need to create an audio buffer to stuff some samples into:

var duration = 1.0;
var rate = ctx.sampleRate;
var length = rate * duration;
var buffer = ctx.createBuffer(1, length, rate);
var data = buffer.getChannelData(0);

In case you're lost here, duration will be the length of our audio buffer in seconds. I've grabbed the sample rate from the audio context and used that to compute the length of the buffer. Now we have "data", which is a Float32Array that we can start adding samples to.

Let's fill that buffer with some noise (random noise in this case):

for (var i = 0; i < data.length; i++) {
    data[i] = Math.random() * 2 - 1;
}

Now all you have to do is play the buffer by creating an audio source and connecting it to the gain node.

var source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(node);
source.start(0);

That's it. The Github code will show you how to turn this random noise into musical notes and goes into a bit more detail in the comments so go check it out!

Comments

Popular posts from this blog

Procedural music with PyAudio and NumPy

Combining two of my favorite pastimes, programming and music... This is the hacky "reduced to it's basic components" version of a library I've been working on for generating music and dealing with music theory.

Tweaking the harmonics by changing the shape of the harmonic components and ratios can produce some interesting sounds. This one only uses sine waveforms, but a square / saw generator is trivial with numpy.

It takes a second to generate, so don't turn your volume up too loud in anticipation (it may be loud).

import math
import numpy
import pyaudio
import itertools
from scipy import interpolate
from operator import itemgetter


class Note:

NOTES = ['c','c#','d','d#','e','f','f#','g','g#','a','a#','b']

def __init__(self, note, octave=4):
self.octave = octave
if isinstance(note, int):
self.index = note
self.note = Note.NOTES[note]
elif isinstance(note, st…

Build a Feed Reader in Python (Parts 7-9)

Part 07 Adding Jinja2 templates to a flask web application.

 Part 08 Adding static files so we can serve some CSS to style our app.

Part 09 Adding a background task to continuously update the articles while the application is running.

Write a Feed Reader in Python

I just started a new video tutorial series. This time it'll cover the entire process of writing an RSS feed reader in Python from start to finish using the feedparser module, flask, and SQLAlchemy. Expect to see about 3-4 new videos a week until this thing is finished!
Click to watch