Web Development Blog

This blog is a full-stack web development blog with tutorials and tips on how to create web apps using JavaScript, HTML, CSS, PHP, front-end, and back-end frameworks. There are step-by-step instructions, working code examples, and links to helpful resources. Pick from the latest web development articles below or browse by tag or category.

Recent Posts

Increase Your Business’s Efficiency (and Spend Some Time on Self-Care)

Your business is trucking along, and you’re on a path toward success. However, your tank is running low and you’re ready to relax. But how?  Russell Good Web Development has answers. Keep reading to explore the great “ates”: automate, delegate, conversate, and compensate.  Automate The digital age means there’s an almost never-ending list of automation […]

Professionals to Hire for Your Web-Based Projects as a Startup Company

Photo by mentatdgt from Pexels Written By: Carla Lopez of boomerbiz.org Web-based projects help increase your company’s success and profits. However, the challenge comes when you do not have the skills or talent within your company to carry out the projects. On top of the tight schedules you might have as a startup, there’s no […]

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