Category: Front End

Browse blog posts from the Front End Web Development category.

Recent Posts

JS Synthesizer Part 8: Detuning Oscillators

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 […]

JS Synthesizer Part 7: Multiple Oscillators

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 […]

JS Synthesizer Part 6: Envelopes

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.

JS Synthesizer Part 5: Gain Staging and Dynamics Processing

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, […]

JS Synthesizer Part 4: Processing Computer Keyboard Input

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 […]

JS Synthesizer Part 3: Creating a Multi-octave Keyboard

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 […]

JS Synthesizer Part 2: Adding an On-screen Keyboard

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 […]

JS Synthesizer Part 1: Making Sound and Choosing a Waveform

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 […]

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: JavaScriptHTML 5SCSS & CSSBootstrap […]

Ditto Clipboard Manager to Optimize Workflow

Learn creative ways to use the Ditto Clipboard manager for Windows to optimize your workflow.