Playable note and octave table
project , published by Maarten Tromp, 322 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.
If you have a tone and wonder which it is, try: chromatic-tuner.com, if you to find out the tempo try: taptempo.io.
The playable table is literally 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.
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.