001 Web Audio Intro with Tone.js

Today, we're diving into the exciting world of web audio programming with Tone.js, a fantastic framework for creating interactive music in the browser.

Tone.js is a powerful tool that abstracts away the complexities of the Web Audio API, making it easier for us to create a wide range of audio-related applications like synthesizers, music sequencers, audio visualizations, and much more. But, let's start with something simple: the equivalent of "Hello World" in Tone.js - a single sound.

Before we start, ensure you have a basic understanding of HTML, CSS, and JavaScript. Don't worry if you are new to web audio, as we are going to start from scratch!

Setup

First, we'll need to include the Tone.js library in our HTML file. You can either download it from the official Tone.js GitHub page or use a CDN. Here's an example:

<html>
  <head>
    <!-- Include the Tone.js library -->
    <script defer src="https://cdn.jsdelivr.net/npm/tone@latest/build/Tone.min.js"></script>
    
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <button id="play-button">Play Sound</button>
  </body>
</html>

In the code above, we've created a button that we'll use to trigger our sound. Note that we have linked to the Tone.js library via a CDN, and we're also linking to an app.js file, where we'll write our JavaScript code.

Creating the Sound

Let's jump to our app.js file. Here, we'll start by creating a basic synthesizer and attaching it to the master output.

// create a synth and connect it to the master output (your speakers)
const synth = new Tone.Synth().toDestination();

The Tone.Synth object is a basic synthesizer with a single oscillator. The toDestination() function connects it to your device's speakers.

Playing the Sound

Now, let's create a function that triggers the synth to play a sound. We'll make it play a middle 'C' note:

function playSound() {
  // trigger a C4 note immediately
  synth.triggerAttackRelease("C4", "8n");
}

The triggerAttackRelease function plays a note. The first parameter is the note, and the second is the duration. Here, we're using "C4", which is a middle 'C' note, and "8n", which stands for an eighth note.

Hooking Up the Button

Finally, let's wire up our button so it triggers the sound when clicked:

const play_btn = document.getElementById('play-button');
play_btn?.addEventListener('click', playSound);

Demo

That's it! You've created your first "Hello World" audio program with Tone.js. When you click the button, it should play a middle 'C' note. Here's the full JavaScript code:

const synth = new Tone.Synth().toDestination();

function playSound() {
  synth.triggerAttackRelease("C4", "8n");
}

const play_btn = document.getElementById('play-button');
play_btn?.addEventListener('click', playSound);

Code

Wrapping Up

Tone.js opens a world of possibilities for web audio programming. Today, we've barely scratched the surface of what it can do, but hopefully, this tutorial has been a good starting point. Stay tuned for future posts where we'll delve deeper into Tone.js, explore more complex sounds, and start creating interactive music experiences.