DEV Community

Building a Synthesizer in Javascript

Daniel Schulz on September 06, 2020

I've been playing around with the WebAudio API. You can generate sounds from it. So I've built a synthesizer app with it as a weekend project. How ...

Read full post

David Dal Busco • Sep 6 '20 • Edited

Amazing 🤩

Not kidding, I used to compose electronic music as a hobby and play in a post-electro band, love these kind of projects!

Well done 👍

calag4n • Sep 7 '20

Great project 👏 !

I'm intented to build a metronome with advanced features for drumming purpose,so, as you guess, I need a very accurate and stable "audio engine" .
Do you think the WebAudio API is able to make the job ?

Daniel Schulz • Sep 7 '20

Maybe.
Take a look at the limitations. It doesn't run on Apple software yet, and there's a limit on simultaneous tones on Chrome.
A metronome that just clicks should be fine and quite easy to implement. Something like this:

setInterval(()=>{
    -> AudioContext
    -> Osc(Sine, 440Hz)
    -> Ramp up and down to prevent clicking
    -> Delete audio node after ramping down
}, bpm)

I'm very interested in its accuracy over a long time, though. If you get around to do that, ping me please :)

calag4n • Sep 7 '20

Yes, I'll do, thanks 🙂.

Michael Tharrington • Sep 7 '20

This is super cool!

And for all you synth nerds out there who land on this, I read another cool post the other day on DEV that you might find interesting:

Dublin Maker Music/Synth Podcast

whykay 👩🏻‍💻🐈🏳️‍🌈 (she/her) ・ Aug 28 '20 ・ 6 min read

#dublinmaker #maker #electronics #synth

Jordan Holt • Sep 6 '20

Very cool! Nice work 🎶
I used to work with analog synths all the time. I'd have to set them and calibrate them ahead of recording sessions. It was a love hate relationship, always some pan pot causing a problem or oscillator going out of tune.
This post gave me some inspiration to explore the Web Audio API.

Thanks 👍