geekabit

lightbulb

Playable note and octave table

project , published by Maarten Tromp, 324 words

When I was searching for a table of notes and octaves that is playable as well, I couldn't find one. So I did what anyone would do and made one myself. It's a useful tool for finding out which octave a note is in.

Horizontally in the table are all the notes in an octave, vertically are the different octaves. It ranges from very low to very high. Click on any note to hear it.

 CC♯DD♯EFF♯GG♯AA♯B
0
1
2
3
4
5
6
7
8
9

If you're looking for an online chromatic tuner try: chromatic-tuner.com, if you need a tap tempo finder try: taptempo.io.

How it works

What you see higher up in this article is a table full of buttons. While you can make any table cell, text or other html element clickable with JavaScript, it's best practice to use the html type that closest resembles the intended function. This also is best for accessibility. So I put a button in each cell.

The table itself is hard-coded in html. It's generated by a simple Python script, since it's tedious work and error-prone to do it all by hand. It could also be generated by JavaScript every time the page is loaded, but it feels inefficient to generate identical code every time, besides static html loads faster.

A bit of JavaScript registers the button clicks and calculates the frequency for the selected note, octave and tuning. Sound is then played through Web Audio API using an oscillator node. AudioContext is created after the first button click, since it's not longer allowed to do this on page load.

Open source

The playable note and octave table in this article is developed using free and open source software where possible. Code is written in JavaScript and html5 using Vim.

In turn this code and article are released into the public domain. You can find all relevant files in the downloads directory of this article.