Building a Simple 🎶 Music Synthesizer 🎵 /w JavaScript
Tags: codepen, javascript, music, tutorial
Published: 2023-08-27 14:16:01

<figure>
  <figcaption>Cover Photo by <a href="https://unsplash.com/@denisseleon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Denisse Leon</a> on <a href="https://unsplash.com/photos/OVEWbIgffDk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </figcaption>
</figure>

Have you ever wanted to create your own digital musical instrument? In this tutorial, we're going to dive into the world of audio synthesis and JavaScript to build a simple music synthesizer right in your browser. With just a few functions, you'll be able to produce a variety of tones and melodies, creating your own unique musical experience.

Before we start, why not take a quick listen to what we'll be building? Check out the live demo:

{% codepen https://codepen.io/mike-at-redspace/pen/GRPopwv %}

***

## HTML Markup
The HTML markup provides the foundation for our music synthesizer user interface. It consists of a catchy title, a row of buttons representing keyboard notes, and a dropdown menu to select different sound waveforms.

![html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9a760lp4ynb0rlgz1ga9.png)


***

## Setup the Initial Variables
![Initial Variable code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh2q0l6cf4hbz5lv512j.png)

- `getSelectedWaveform`:
This function simply returns the currently selected waveform type from the dropdown. It helps us keep track of which sound wave shape we're using.
- `selectedWaveform`: This variable stores the selected waveform type (initially set to the default selected value from the dropdown).
- `audioContext`: This is an instance of the AudioContext, which is the central component for handling audio operations.
activeOscillators: This object keeps track of active oscillators (sounds currently playing).


***

## The `createOscillatorNode` Function:
![createOscillatorNode code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ni9ri3frhl74588nqg3b.png)

Here, we define a function that sets up an oscillator and a gain node in the audio context. An oscillator is like the heart of a sound wave, and a gain node controls its volume. We specify the waveform type, frequency, and gradually increase the volume to avoid sudden clicks.

***

## Playback Functions

![stop and play code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4q4u96v4ttm4cljfqxf.png)

- `playSound`: This function takes a frequency as input and plays a sound with that frequency. It uses the `createOscillatorNode` function to create an oscillator if it's not already active. This helps us avoid overlapping sounds.
- `stopSound`: When we release a button or move the cursor away, we call this function. It smoothly decreases the sound's volume to avoid abrupt cutoffs and stops the oscillator, ensuring a clean stop.

***

## The `setupButtonListeners` Function:

![code to setupButtonListeners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g77ifdu15hd0ayfu1rb0.png)

In this function, we set up listeners for each note button. When you press a button, it triggers the `playSound` function, and when you release it or move away, it triggers the `stopSound` function. This gives you interactive control over the sound.

***

Congratulations, you've just embarked on your journey into the world of audio synthesis! 

Whether you're a music enthusiast or a curious developer, this tutorial has equipped you to create, experiment, and explore the art of sound in the digital realm.

Happy Coding!

{% user mike-at-redspace %}