-30
-20
-15
-10
-5
0
5
10
15
20
30
C
C#
D
E'
E
F
F#
G
A'
A
B'
B
Inspired by 100 Days UI, Day 087: Guitar tuner.
This is a chrome only draft for the UI elements, for example I used
First of all, it is work in progress. There are quite a few magic numbers in it and it's full of pixel values, and the code structure is messy. For a more useful (cross browser) approach the 'note-dail' element should be written (completely) in SVG.
As far as I understand the UI, the outer numeric ring are different octaves - the inner one let you choose the note. I put the default mapping (E4,A2,D3,G3,B3,E2) for a guitar on the notes to preselect the 'correct' ocatve - which is the base for the frequence calculation, but you can switch the octave by selecting a diffrent value on the outer ring. Pressing the 'play tune' plays the tone until you stop it, down and up on one note is the other way. Next step: Getting the audio input...
This is a chrome only draft for the UI elements, for example I used
clip-path: polygon to create the different "pie" pieces (which is currently webkit only)First of all, it is work in progress. There are quite a few magic numbers in it and it's full of pixel values, and the code structure is messy. For a more useful (cross browser) approach the 'note-dail' element should be written (completely) in SVG.
As far as I understand the UI, the outer numeric ring are different octaves - the inner one let you choose the note. I put the default mapping (E4,A2,D3,G3,B3,E2) for a guitar on the notes to preselect the 'correct' ocatve - which is the base for the frequence calculation, but you can switch the octave by selecting a diffrent value on the outer ring. Pressing the 'play tune' plays the tone until you stop it, down and up on one note is the other way. Next step: Getting the audio input...