In my last 3 posts, I’ve started to learn how to do DSP on the web:

1. Making Music with Buffers: Pregenerated Buffers
2. Real Time Synthesis: Naively Chaining Buffers
3. Real Time Synthesis pt 2: Using AudioWorklets

In this post, I want to focus more an actual DSP techniques!

This post will start with the absolute basics. There will most likely be more posts building on top of this one.

Mastering the techniques of DSP programming allows you to create anything with audio! These techniques are not specific to the web and could be easily transfered to another language. Here’s an example from someone who already understands how it works:

playupdate

I am clearly not there yet, so I am eager to learn to someday arrive at that level! I’ve found this example on wavepot, which is a web based DSP editor I’ve just found out about!

Just a single function

All of the below examples will use a text field with at least a dsp function in it:

playupdate

This dsp function will get called by the audio system 44100 times per second! The function has only one argument t, which is the time in seconds since the playback started. The audio system expects the dsp function to return a single number between -1 and 1. This number will control the position of the speakers at the time t! This is all we need to implement any synth or effect we want!

Oscillators

Here are 4 different oscillators:

playupdate

We can mix oscillators by just adding them:

playupdate

This will create a gritty phasing effect!

Modulation

We can modulate the amplitude by multiplying with another oscillator, giving a so called tremolo:

playupdate

That modulation is maybe a bit extreme, let’s create some helpers:

playupdate

Let’s modulate the frequency:

playupdate

Hm, something odd is going on here.. I would have expected that the frequency just oscillates between 90 and 110.. For now, let’s leave it like that…

Sequences

A standing note is rather boring.. We could invent a simple sequence mechanism:

playupdate

Instead of typing frequencies, it should be useful to be able to type in midi numbers in semitones:

playupdate

Envelopes

We can create a linear attack by multiplying with a slow sawmod:

playupdate

…or create decays by inverting the range:

playupdate

We could even sequence the envelope speed:

playupdate

End of Level

If you’ve followed along, congrats for completing this level. The next level will follow soon.

Credits

After creating the last posts, I’ve found wavepot (thanks Raphael for the link), which inspired the idea to use a seperate dsp function instead of writing an expression directly.

The example at the top is also from that page.

Bonus: Doughbeat

A minimal version of the editor you’ve seen in this post is also available here: https://github.com/felixroos/doughbeat

On the github page, there are many more examples with more sophisticated DSP taken from wavepot, which seems like a great learning resource for the future.

Here is one more example:

playupdate