tuner.html

<!doctype html>
<html>
    <head>
        <meta charset=utf8>
    </head>
    <body>
        <p><input id=steps size=3> half-steps above A4</p>
        <div id=result></div>
        <canvas width=1024 height=256 id=freqs></canvas>
        <script>
         var result = document.getElementById("result");
         var steps = document.getElementById("steps");
         var drawCtx = document.getElementById("freqs").getContext("2d");
         drawCtx.fillStyle = '#000';

         var hz = 440;

         function err(e) {
             document.body.textContent = e;
         }

         window.onerror = err;

         steps.oninput = function() {
             var val = parseInt(steps.value, 10) || 0;
             hz = 440 * Math.pow(2, val / 12);
         }

         var offset = 0;

         var AudioContext = window.AudioContext || window.webkitAudioContext;
         var ctx = new AudioContext();

         var capture = ctx.createAnalyser();
         capture.fftSize = 1024;
         var audio = new Float32Array(1024);

         function draw(t) {
             result.textContent = hz + "Hz";
             var t = ctx.currentTime;
             capture.getFloatTimeDomainData(audio);
             drawCtx.clearRect(0, 0, 1024, 256);
             for (var i = 0; i < audio.length; i++) {
                 drawCtx.fillRect((i + ctx.sampleRate * (ctx.currentTime % (1 / hz))) % 1024, 256 * audio[i] + 128, 1, 1);
             }
             requestAnimationFrame(draw);
         }
         var src;
         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
         navigator.getUserMedia({audio: true},
                  function(mic) {
                      src = ctx.createMediaStreamSource(mic);
                      src.connect(capture);
                      draw();
                  },
                  err);
        </script>
    </body>
</html>