Search for a command to run...
Create a playable synth using only HTML, CSS, and JavaScript with the Tone.js library.
i'm trav
i've also been known to make music
In this series, I'll go over the basics of using JavaScript to make music and play audio with the Tone.js library.
I've always been intrigued by browser extensions and their ability to do crazy things and make the web cooler + get rid of ads. That said, going from concept to a working Chrome extension can be super annoying with repetitive setup tasks, configurati...
This is going to be a "quick" little guide to customizing the tmux status bar to include a scrolling Spotify “Now Playing” widget. I’m going to be doing this on macOS, but you should be able to adapt it to Linux and I'll try to assist where I can. If...
Go From Freelancer to Corporate Sellout In 43 Easy Steps
An overview of one of the most popular and loved programming languages.
The Importance of Mental Health as a Developer
This is the first part of the series "Make Music With Tone.js."
Maybe you want to make music, but you don't want to spend money on a DAW or expensive equipment. Or maybe you're just too lazy to learn an instrument. Either way, I have the perfect solution for you: create a playable synthesizer using Tone.js! For this short guide, all you'll need is basic knowledge of HTML, CSS, and JavaScript.
Tone.js is a JavaScript library for creating interactive music in the browser. With Tone.js, you can create sound files and play them back, create synthesizers and samplers, and much more. You can even use Tone.js to create entire songs! For our purposes, we'll just be using it to create a simple synthesizer that we can play with our mouse or keyboard.
First, we need to create a new project. We'll do this by creating a new folder on our computer and giving it a name. I'm going to call mine "tone-synth". Inside this folder, we'll create three new files: index.html, style.css, and script.js. These are the files that we'll be working with in this tutorial.
Let's get to work making each part of a simple monophonic synth. We'll want to make a nice piano UI in HTML, style it with CSS, then make it play notes when we click each piano key as well as map each note to the keyboard.
First, we'll create our HTML and add links to the stylesheet as well as the . We'll start with a simple structure that looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- our piano will go here -->
<script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Now, let's add the HTML for our piano keys. We'll use a simple structure of <div>s with each representing a key, and give it a class to target in CSS. We'll also give each key a data-note value to tell Tone.js what note to play, as well as a data-key to map it to the QWERTY keyboard.
<div class="piano">
<div class="key white" data-note="C3" data-key="a"></div>
<div class="key black" data-note="C#3" data-key="w"></div>
<div class="key white" data-note="D3" data-key="s"></div>
<div class="key black" data-note="D#3" data-key="e"></div>
<div class="key white" data-note="E3" data-key="d"></div>
<div class="key white" data-note="F3" data-key="f"></div>
<div class="key black" data-note="F#3" data-key="t"></div>
<div class="key white" data-note="G3" data-key="g"></div>
<div class="key black" data-note="G#3" data-key="y"></div>
<div class="key white" data-note="A3" data-key="h"></div>
<div class="key black" data-note="A#3" data-key="u"></div>
<div class="key white" data-note="B3" data-key="j"></div>
<div class="key white" data-note="C4" data-key="k"></div>
<div class="key black" data-note="C#4" data-key="o"></div>
<div class="key white" data-note="D4" data-key="l"></div>
<div class="key black" data-note="D#4" data-key="p"></div>
<div class="key white" data-note="E4" data-key=";"></div>
<div class="key white" data-note="F4" data-key="'"></div>
</div>
That's it for our HTML! Now let's move on to CSS.
Our CSS is fairly simple but results in a nice looking piano. We'll start by setting some globals and styling the piano:
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
background-color: #282938;
}
.piano {
display: flex;
position: relative;
padding: 40px;
padding-bottom: 0;
background-color: #341304;
border: 1px solid #160801;
border-radius: 16px;
user-select: none;
}
We want our piano keys to look like, well, piano keys! To do this, we'll give the keys a width and height, then offset the black keys' margin. Then, set their background color and change it when a key is active.
Our CSS for that will look like this:
.key {
width: 75px;
height: 350px;
border: 2px outset #dddddd;
border-radius: 0 0 6px 6px;
background: white;
margin-bottom: -8px;
}
.key.black {
z-index: 1;
height: 225px;
margin-left: -24px;
margin-right: -24px;
width: 50px;
border-color: #5f5f5f;
background-color: #222;
}
.key.white.active {
background-color: #ddd
}
.key.black.active {
background-color: #000
}
.key.white + .key.white {
margin-left: 2px;
}
Here's what it should look like:
Lookin' good. Let's move on to the JavaScript portion of our project.
The main.js file is where we'll put all of our code that makes our synth actually work. Let's start by initializing a Tone.js Synth and creating an array from our piano key elements that we can access later:
const synth = new Tone.Synth().toDestination();
const keys = Array.from(document.querySelectorAll('.key'));
Now let's add an event listener so our keys make a sound when we click them. We can do this by creating a 'mousedown' event on document, checking if the event target element contains the class 'key', then triggering an attack with Tone.js. We'll also want to add the 'active' class to the element so that we have a visual indicator:
document.addEventListener('mousedown', (e) => {
if (!e.target.classList.contains('key')) {
return;
}
synth.triggerAttack(e.target.dataset.note);
e.target.classList.add('active');
});
We don't want our note to play forever, so let's create a 'mouseup' event listener, where we remove the 'active' class from all keys and trigger a release:
document.addEventListener('mouseup', () => {
keys.forEach(key => key.classList.remove('active'));
synth.triggerRelease();
});
That's it for our simple synth! You can test it out by opening index.html in your browser and clicking on each key. You should hear a different note being played back for each key you click on. But what if we want to be able to play our synth with our keyboard instead of just our mouse? Let's do that!
Since each key has a data attribute with its associated QWERTY key, we can create event listeners for 'keydown' then find the element containing that data attribute in the keys array. For 'keyup', we'll do the same thing we did for 'mouseup'.
document.addEventListener('keydown', (e) => {
const key = keys.find(key => key.dataset.key === e.key);
if (!key) {
return;
}
key.classList.add('active');
synth.triggerAttack(key.dataset.note);
});
document.addEventListener('keyup', () => {
keys.forEach(key => key.classList.remove('active'));
synth.triggerRelease();
});
Now you can play the notes with your keyboard!
To test out your new synth, open index.html in your browser and try clicking on each key or pressing the corresponding letter on your keyboard. You should hear a different note being played back for each key you click or press.
Here's a working demo on CodePen:
The GitHub repo can be found here.
If everything sounds good, congratulations! You've just created your very first playable synthesizer with Tone.js!
Of course, this is just scratching the surface. In the next article, we'll dive deeper into Tone.js and expand our synth to be polyphonic, as well as add controls to change the sound, adjust levels, switch octaves, and add effects!
Let me know if this was helpful in the comments or if you have any questions.
Be sure to follow me for more like this!