Trying Out Tone.js and Making a Chord Guessing Game

Lloyd Atkinson


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.


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");

Multiple buttons

Chord guessing game

That was a...


Need help with your software project? Let's talk

Stay up to date

Subscribe to my newsletter to stay up to date on my articles and projects

© Lloyd Atkinson 2023 ✌