Browser-based music performance tool

View the Project on GitHub billgathen/pentaphone

The Pentaphone

…is an in-browser music performance tool built on React.js and the Web Audio API. Rewritten from scratch to use modern js/react/web-audio-api in March, 2022.

Click here for a playable example or here to view the project code on GitHub.

What is the Pentaphone?

Most online synth examples are too complicated: they try to give you everything, but you can make a bunch of music using only a subset of the 12 available notes. The Pentaphone limits itself to just those heavy-hitters.

The notes of the major pentatonic (the 1st, 2nd, 3rd, 5th and 6th notes of a scale) always sound good with their associated chords. The Pentaphone puts those 5 notes in your right hand (labeled 1 through 5 on the on-screen keyboard).

The “Big Three” chords in diatonic harmony are the ones based on the 1st (I), 4th (IV) and 5th (V) notes of the key. Those three chords are in your left hand (labeled I, IV, and V).

If you can touch-type, you’ll feel right at home with the Pentaphone. Just put your fingers on home row and start playing!

Feeling more adventurous? Try relative minor chords: only one row up (labeled vi, ii, iii).

Hold down the key for any chord with your left hand (try I to start), then play any notes in the right hand (try 3 2 1 2 3 3 3): it always works! You’ll feel like an instant musical genius. Explore, try different combinations, even multiple notes in the right hand.

But I don’t know how to play music!

Try a few of these ideas on for size:

Try holding down a I with your left hand and playing some notes with your right hand, then switch to a IV (with some more notes), then a V (more notes), then back to a I. It should sound very familiar. Personally, I like minor chords even better (they have more drama), so try this: vi, iii, ii, vi. You don’t have to change chords a lot: the longer you play on one chord, the more neat combinations you find that sound good with it. Your ear is your friend: if it sounds good, it is good. You can’t break anything, so just have fun with it!

Song Examples

You might be asking “Can I play actual music, with such a limited set of choices?” Click the “Song Examples” button for a few American folksongs that can be played with just the major pentatonic.

What else can it do?


The Pentaphone has separate tone controls for the left and right hands, allowing more variety in the sound. Tone is selected using the select boxes at the top right and left of the on-screen keyboard. Use your mouse to select the sound you like.

Sine Sine wave is the default sound, very round and mellow.

Triangle Triangle is slightly-edgier than sine wave, with a bit of hollowness.

Sawtooth Sawtooth is a much brighter, buzzier, more aggressive sound.

Square Square is bright and buzzy like sawtooth, but with a bit of hollowness.

Mixing and matching

For a mellow, gentle sound, leaving both left and right on sine is perfect.

To make your melodies cut through the chords a bit more, leave the left side on sine and switch to triangle for the right side.

For a more aggressive rock tone, try sawtooth on both right and left.

For a more synthetic, artificial “80’s Pop” sound, triangle on the left and square on the right is an interesting option.

For an “8-bit” or “vintage videogame” sound, square on both right and left is the way to go.