Pitch Nav is played by whistling.

Tap anywhere, then allow the microphone.

m
e
n
u

Is this a hint?

Go on give it a play
( G A B G )

\m/...(>.<)…\m/

A concerto of interaction,
written in HTML, CSS & JS is it pointerless... yes it is.

What's it like to navigate with sound/pitch? Lets find out...

C
a
n
y
o
u
b
u
i
l
d
H
o
w
a
b
o
u
t
d
r
a
w

Can you play along?

p
r
i
n
t
s
a
v
e
t
o
p 
        ●       ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●                        
        ●●●●●●●●●●●●         ●●●●●●●●●●●●●●●●●●●●●●●   ●●●●●●●●●                 
  ●●●●●●     ●●●●●                                            ●●●●●●             
 ●●●●                                                            ●●●●●           
●●●                                                                  ●●●●        
●●                                                                      ●●●●●    
●●                                                                           ●    
●●●             ●●●●●●                                                        ●●   
●●●         ●●●●●●●●●●●●●●                            ●●●●●●●●●●●●●            ●   
●●●       ●●●●●●●●●●●●●●●●●●                        ●●●●●●●●●●●●●●●●●          ●●  
●●     ●●●●●●●●●●●●●●●●●●●●●                     ●●●●●●●●●●●●●●●●●●●●●●       ●●  
●●  ●●●●●●●●●●●●●●●●●●●●●●●●●                  ●●●●●●●●●●●●●●●●●●●●●●●●●●     ●●  
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●                ●●●●●●●●●●●●●●●●●●●●●●●●●●●●    ●   
  ●●●●●●●●●●●●●●●●●●●●●●●●●●●●              ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●   
  ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●            ●●●●●●●●●●●●  ●●●   ●●●●●●●●●●●●●●●   
  ●●●●●●●●●●●●●       ●●●●●●●●●             ●●●●●●●●●●       ●●●●●●●●●●●●●●●●●   
   ● ●●●●●●●●●●●●●●●●●●●●●●●●●●               ●●●●●●●●●●●●●●●●●●●●●●●        ●●  
   ●  ●●●●●●●●●●●●●●●●●●●●●●●●●                 ●●●●●●●●●●●●●●●●●●●●          ●  
  ●●  ●●●●●●●●●●●●●●●●●●●●●●●●                    ●●●●●●●●●●●●●●●●            ●  
  ●   ●●●●●●●●●●●●●●●●●●●●●●●                      ●●●●●●●●●●●●●●             ●● 
 ●      ●●●●●●●●●●●●●●●●●●●●●                       ●●●●●●●●●●●●              ●● 
●●          ●●●●●●●●●●●●●●                                                    ●● 
●              ●●●●●●●●                                                       ●● 
●●                                     ●●●●●                                   ●● 
●                                   ●●●●●●●●●●                                  ● 
●●                                 ●●●●●●●●●●●●●●                                ●●
●                                 ●●●●●●●●●●●●●●●●                               ●●
●●                                ●●●●●●●●●●●●●●●●                               ●●
●●                               ●●●●●●●●●●●●●●●●                             ●●●●
●●●                              ●●●●●●●●●●●●●●●●                        ●●●●●●●●●
●●●●●●                           ●●●●●●●●●●●●●●●                      ●●●●●●●●●●● 
●●●●●●●●●●●●●●●●               ●●●●●●●●●●●●●●●                    ●●●●●●●●●●●    
●●●●●●●●●●●●●●●●               ●●●●●●   ●●●                      ●● ●●●●●●●      
    ●●●●●●●●●●●                                                  ●●●●●●●●        
         ●●●●●●                                                 ●●●●●●●●●●●      
           ●●●  ●                                              ●●●●●● ●●● ●●●    
            ●●●●●●●                                           ●●●●●        ●●    
           ●●●●●●●●●●●                                  ●●●   ●●●        ●●●●●   
          ●●      ●●●●●●●●                  ●●        ●●●●●●●●●   ●●  ●●●●●●●●   
         ●●        ●●●●●●●●●●●●●●●●●●●●●●●●●●●● ●●●●●●● ●●●●     ●●●●●●●●●●●●●   
         ●●●●      ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● ●●●           ●●●●●●●●●●●●●   
        ●●   ●●●●●●●●●●●●●●      ●     ●   ●●●●                ●●●●●●●●●●●   ●   
        ●●      ●●●●●●●●●●●      ●     ●●                   ●●●●     ●●●●●   ●   
        ●●●●●    ●●●●●●●●●●      ●      ●●           ●●●●●●●●●      ●●●●●●   ●   
        ●● ●●●●  ●●●●●●●●●●    ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●    ●●●●●●●●●   ●●   
         ●   ●●●●●●●●●●●         ●●●●    ●●   ●●●●●●●●●●●●●●●●●●● ●●●●●●●  ●●    
         ●●   ●●●●●●●●●●●                ●     ●●●●●●●●●●●●●●●●  ●●       ●●     
         ●●     ●●●●●●●●●●● ●●●●●●● ●● ●●●●●●●●●●●●●●●●●●●●●●●●  ●       ●●      
          ●      ●●●●●●●●●●●●●●●●●●●●●●●   ●●●●●●●●●●● ●●●●●  ●●●●       ●       
          ●●          ●●●●●●●  ●●●   ●●●●●●●●●●●●●●●●   ●●●●  ●●       ●●        
           ●                ●  ●●●●●●●●●●●●●●●●  ●●●●    ●●           ●●         
           ●●                                                        ●●●         
            ●●                                                      ●●●          
            ●●●●                                                  ●●●            
              ●●●                                                ●●●             
              ●●●●                                               ●●              
               ●●●●                                             ●●               
                 ●●●●                                          ●●●               
                   ●●●●                                   ●●●●●●                 
                      ●●●                                ●●●●                    
                        ●●●                           ●●●●●●                     
                          ●●●●●                    ●●●●●                         
                              ●●●●●●●●●●●    ●●●●●●●●                            
                                 ●●●●●●●●●●●●●●

Pitch Nav is a website with no pointer. Nothing here can be clicked, tapped or scrolled. Every link is a short tune written on a stave, and you get to it by whistling.

It was made to ask a small question: what does navigating feel like when the input is sound? A cursor is precise and silent. A whistle is neither. You can hear yourself get it wrong, and so can everyone near you.

It is one of the Human Factors experiments by Client Side Services, a set of navigations that swap the pointer for something the body already does.

Only the note matters, not the octave, so whistle wherever is comfortable. Leave a little gap between notes. A wrong note sends the red line back to the start.

r
e
a
d
t
o
p

The page asks for your microphone and listens through the Web Audio API. Sixty times a second it takes a slice of the waveform and runs an autocorrelation on it, which finds the one frequency the slice repeats at. That frequency is rounded to the nearest note on a piano.

A whistle is a good instrument for this. It is close to a pure sine wave, so there is one frequency to find. A voice is full of overtones and works less well.

Each stave is a sequence of notes. While you whistle, the red line steps along it one note at a time. Reach the end and the line does its thing: open the menu, turn a page, fill in a drawing. Quiet sounds are ignored, and a note has to be held for about a tenth of a second to count.

Built with HTML, CSS and JavaScript, nothing else. The autocorrelation comes from pitchdetect.js by Chris Wilson. The music font is Petaluma by Steinberg, under the Open Font License. Everything happens in your browser: no sound leaves the page.

r
e
a
d
t
o
p