How to Build a Virtual Synthesizer Using JavaScript and the Web Audio API

This series of tutorials that will show you how to create a mobile compatible, virtual synthesizer with JavaScript and the Web Audio API. There are working code examples for each part in the series. Click here download or clone them from the GitHub repository. Here are the technologies we’ll be using:

• JavaScript
• HTML 5
• SCSS & CSS
• Bootstrap 4

Here are the JavaScript libraries we’ll be using:

• jQuery
• interact.js
• precision-inputs.js

Table of contents:

• Part 1: Making Sound and Choosing a Waveform
• Part 2: Connecting an On-screen Keyboard
• Part 3: Creating a Multi-octave Keyboard
• Part 4: Processing Computer Keyboard Input
• Part 5: Gain Staging and Dynamics Processing
• Part 6: Envelopes
• Part 7: Mutiple Oscillators
• Part 8: Detuning Oscillators