/ web-audio

Introducing: Audio-effects

This year has been the year I started talking in front of a public. It all started at the end of last year when I gave my first public presentation at the Fronteers meetup in Belgium.

I decided that I wanted to learn more about the web-audio-api, and set myself the goal of making a presentation about it.

Since I'm a guitar player I quickly ended up trying to recreate some effects and applying them to the sound of my guitar in real-time. Of course all in the browser.

This turned out to be something people like to hear about, and soon I got accepted to speak at JSConf Budapest and got invited to speak at Frontend United in Ghent.

While creating this presentation I noticed that creating these effects is fun, but some of them are fairly complicated, so I tried to make a little library which would make using these effects a bit easier.

Introducing Audio-effects.

Using this library should be as simple as importing the effects you want, and chaining them together.

import {Input, Distortion, Delay, Output} from 'audio-effects';

const audioContext = new AudioContext();
const input = new Input(audioContext);
const distortion = new Distortion(audioContext);
const delay = new Delay(audioContext);
const output = new Output(audioContext);

// Get the user's audio input

// Chain it all together

Working on this project has been a fun and learning experience. There is still al lot of work to be done, but the current version is fully functional.

In the future I hope to add more effects, and improve the codebase by writing tests for example.

The library is available on github and on npm.

PS: the presentation about the effects can be found here. A little react application using this library to add the effects to your computer's input device can be found here.

PPS: if you want me to come and talk about this or web-audio in general, feel free to contact me.

Sam Bellen

Sam Bellen

Frontend developer at madewithlove - Co-organizer at Fronteers Belgium - Conference speaker - Cat lover

Read More