6 ms·

I wrote this for my wife who is learning to play viola (I play violin at a barely endurable amateur level). It was to help her improve her intonation. As you pl

I wrote this for my wife who is learning to play viola (I play violin at a barely endurable amateur level). It was to help her improve her intonation. As you play it draws the notes that you are playing on the musical staff, coloring them black for in tune, red for sharp, blue for flat. It's one single html/javascript file, no server. This page works on my Thinkpad/Ubuntu laptop, but won't work on my Android phone, I don't know why. It probably won't work if you try to sing into it rather than play an instrument because the human voice is so complex, in terms of its wave form. I guess. I'm a barely endurable amateur in this domain too. But if you have a musical instrument handy, it might entertain you for a few minutes.

2data222 6y ago
Hey, just wanted to let you know that this worked on my Android phone (Pixel 4 XL running stock Android 11 and in Chrome) after I granted microphone permissions. I whistled a few bars and was grossly out of tune so I know it's working ;)
jtanderson 6y ago
Very nice work! There seem to be some issues for me with the lower strings on guitar: the low E registers as a B, for example. Higher strings seem to work well though. Not totally sure what's going on, but could probably be attributed to mic quality :) Edit: after more playing around (heh) it does start to pick up the almost-E notes, F, G, etc. but is a little inconsistent. I tried monitoring the mic and even recording to play back what got picked up, and it sounds just as clear as the higher notes. Maybe something numerical happening in the Javascript fft?
- InitialLastName 6y ago
  You need a longer FFT window to discern lower frequencies. Assuming a 44.1k sample rate and the default window size of 4096, you only get 10Hz buckets. Given that the low E is 82Hz, you effectively can't distinguish it from the D# at 78Hz and the F at 87Hz
  - ctrager 6y ago
    FFT is configurable at the bottom of the page, but for me it gets unpleasantly laggy if I make it bigger than 4096
    - InitialLastName 6y ago
      Yep, that's the tradeoff. As with seemingly everything else, you can thank Claude Shannon for that.
loco5niner 6y ago
Way cool. Just tried it with my voice, and it actually tracked really well. Impressively kept up with me on the scales, but mostly red and blue, lol.
- ctrager 6y ago
  You must have a very pure voice!
  - loco5niner 6y ago
    Don't know about that, but I do have good vocal control :-)
- wsinks 6y ago
  Play with the sensitivity up between 20-40. It should even out the red and blue for you!
jacquesm 6y ago
UI suggestion: exaggerate the 'flat/sharp' by drawing the note higher or lower on the stave and turn it green when it is in tune.
- shhsshs 6y ago
  Are you suggesting moving the tail higher/lower on the staff, or the whole note? The note should certainly not move up/down, though I think moving the tail would be cool!
  - jacquesm 6y ago
    Moving the note is a very good indication that it is off. You know you're playing a 'D', then you move the note until it is shown as a 'D' and green. Simplest user interface there could be.
wsinks 6y ago
I'm an avid whistler, and have always wanted this exact thing. Thank you for making something so quick and responsive! (chrome, Mac Catalina) I found for me that with sensitivity at 20 I can hit every note perfectly! This is a fun tool to quickly go from a melody idea to a DAW now. I'm very impressed, I've shared with my social as well because I thought it was so cool! Thank you for sharing your work.
- ctrager 6y ago
  Both my kids are software developers. I'm always trying to impress them. I copy/pasted your comment into our family WhatsApp channel to see if they would say, "Gee Dad, you are so cool!", but so far crickets.
deleted 6y ago
[deleted]
adonovan 6y ago
I took up the violin just a few years ago---my midlife crisis: neither cheaper nor less noisy than a motorbike---and it's been fascinating to dive into the maths of music in a way that my school music teachers were never able to satisfactorily explain. At first I too was tempted to build an app just like this, but when I mentioned this to my teacher, she made it very plain that the only way to learn intonation is: hear, move fingers, repeat. Anything that gets in the way of making that feedback loop as tight as possible---devices, tuners, even conscious thought---is a distraction. In hindsight I think she's right. Though I too am still a barely endurable amateur, my intonation has improved to the extent that it feels like I have grown a new organ in my brain that connects my ears directly to my fingers.
- ctrager 6y ago
  Even though I wrote the app, I agree with your teacher about devices, but no conscious thought?.

2data222 6y ago

Hey, just wanted to let you know that this worked on my Android phone (Pixel 4 XL running stock Android 11 and in Chrome) after I granted microphone permissions. I whistled a few bars and was grossly out of tune so I know it's working ;)

jtanderson 6y ago

Very nice work! There seem to be some issues for me with the lower strings on guitar: the low E registers as a B, for example. Higher strings seem to work well though. Not totally sure what's going on, but could probably be attributed to mic quality :) Edit: after more playing around (heh) it does start to pick up the almost-E notes, F, G, etc. but is a little inconsistent. I tried monitoring the mic and even recording to play back what got picked up, and it sounds just as clear as the higher notes. Maybe something numerical happening in the Javascript fft?

InitialLastName 6y ago
You need a longer FFT window to discern lower frequencies. Assuming a 44.1k sample rate and the default window size of 4096, you only get 10Hz buckets. Given that the low E is 82Hz, you effectively can't distinguish it from the D# at 78Hz and the F at 87Hz
- ctrager 6y ago
  FFT is configurable at the bottom of the page, but for me it gets unpleasantly laggy if I make it bigger than 4096
  - InitialLastName 6y ago
    Yep, that's the tradeoff. As with seemingly everything else, you can thank Claude Shannon for that.

loco5niner 6y ago

Way cool. Just tried it with my voice, and it actually tracked really well. Impressively kept up with me on the scales, but mostly red and blue, lol.

ctrager 6y ago
You must have a very pure voice!
- loco5niner 6y ago
  Don't know about that, but I do have good vocal control :-)
wsinks 6y ago
Play with the sensitivity up between 20-40. It should even out the red and blue for you!

jacquesm 6y ago

UI suggestion: exaggerate the 'flat/sharp' by drawing the note higher or lower on the stave and turn it green when it is in tune.

shhsshs 6y ago
Are you suggesting moving the tail higher/lower on the staff, or the whole note? The note should certainly not move up/down, though I think moving the tail would be cool!
- jacquesm 6y ago
  Moving the note is a very good indication that it is off. You know you're playing a 'D', then you move the note until it is shown as a 'D' and green. Simplest user interface there could be.

wsinks 6y ago

I'm an avid whistler, and have always wanted this exact thing. Thank you for making something so quick and responsive! (chrome, Mac Catalina) I found for me that with sensitivity at 20 I can hit every note perfectly! This is a fun tool to quickly go from a melody idea to a DAW now. I'm very impressed, I've shared with my social as well because I thought it was so cool! Thank you for sharing your work.

ctrager 6y ago
Both my kids are software developers. I'm always trying to impress them. I copy/pasted your comment into our family WhatsApp channel to see if they would say, "Gee Dad, you are so cool!", but so far crickets.

deleted 6y ago

[deleted]

adonovan 6y ago

I took up the violin just a few years ago---my midlife crisis: neither cheaper nor less noisy than a motorbike---and it's been fascinating to dive into the maths of music in a way that my school music teachers were never able to satisfactorily explain. At first I too was tempted to build an app just like this, but when I mentioned this to my teacher, she made it very plain that the only way to learn intonation is: hear, move fingers, repeat. Anything that gets in the way of making that feedback loop as tight as possible---devices, tuners, even conscious thought---is a distraction. In hindsight I think she's right. Though I too am still a barely endurable amateur, my intonation has improved to the extent that it feels like I have grown a new organ in my brain that connects my ears directly to my fingers.

ctrager 6y ago
Even though I wrote the app, I agree with your teacher about devices, but no conscious thought?.