Trying Out Tone.js and Making a Chord Guessing Game

Introduction

Firstly we need to understand what the Web Audio API is - though I think the name is a fairly self-explanatory.

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

— Web Audio API - MDN

Audio engineering is a complex field so it’s natural the Web Audio API is complex out of necessity. It’s easy to get lost with the numerous types of nodes and how to connect and schedule them.

A higher level library called Tone.js might be a good starting point. It is a layer of abstraction over the Web Audio API. That’s what I’ll be using in this post.

Demos

These demos are using Vue.

Playing a chord

const synth = new Tone.Synth().toDestination();
//play a middle 'C' for the duration of an 8th note
synth.triggerAttackRelease("C4", "8n");

Play middle C

Multiple buttons

Play A1 Play A2 Play A3 Play A4 Play A5 Play A6 Play A7 Play A8

Chord guessing game

Play random note

That was a...