This series of tutorials will show you how to create a virtual synthesizer using JavaScript and the Web Audio API.
In part eight, we’ll be adding a detune feature to the synthesizer. This will enable the user to make the oscillators slightly out of tune with each other which can add a cool dimension to the sound. This tutorial is part eight in a series that will show you how to create a virtual synthesizer […]
In part seven, we’ll be adding an another oscillator to the synthesizer. We’ll end up with two, but you can use this logic to add as many oscillators as you want. Having multiple oscillators creates a lot of sonic potential for the instrument. This tutorial is part seven in a series that will show you how […]
In part six, we'll be adding an amplitude envelope with a graphic visualizer and FL studio style knobs. This envelope will allow us to define attack, hold, decay, sustain, and release.
In part five we’ll restructure the gain staging in our synthesizer to prevent clipping using the Web Audio API’s DynamicsCompressorNode and GainNode . This will touch on some of the basics of dynamics processing. In the last post, we gave the user the ability to play multiple notes at once with the computer keyboard. However, […]
In part four, we’ll learn how to process computer keyboard input. This will enable users to play on the computer keyboard instead of clicking with their mouse. Here’s what we’ll cover in part four: Change how we add voices to the activeVoices object Add the key code to note map Create keyup/keydown EventListeners This tutorial […]
This tutorial is part three in a series that will show you how to create a virtual synthesizer using JavaScript and the Web Audio API. In this part, we’ll cover how to create a multi-octave keyboard with JavaScript. Click here to clone or download the working code examples from the GitHub repository. Click here to view the […]
This tutorial is part two in a series that will show you how to create a virtual synthesizer using JavaScript and the Web Audio API. In part two, we’ll be adding an on-screen keyboard to the synthesizer. Click here to clone or download the working code examples from the GitHub repository. Click here to view […]
This tutorial is part one in a series that will show you how to create a virtual synthesizer using JavaScript and the Web Audio API. Click here to clone or download the working code examples from the GitHub repository. Click here to view the finished product that uses the concepts and code discussed in this […]
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: JavaScriptHTML 5SCSS & CSSBootstrap […]