index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
        <title>Audio Analyser</title>
        <meta name="description" content="An audio analyser webapp useful for tuning instruments">

        <style>

            body {
                font: 1em/1.3 monospace;
                margin: 0;
                padding: 0;
                background-color: hsl(100,75%,10%);
                color: #fff;
                position: relative;
                width: 100vw;
                height: 100vh;
            }

            h1 {
                text-transform: uppercase;
                font-size: 1.3rem;
                width: 100%;
                text-align: center;
                font-weight: normal;
            }            

            sub {
                font-size: .5em;
            }

            a,
            a:link,
            a:visited {
                color: hsl(300,75%,66%);
            }

            a:hover,
            a:active {
                color: hsl(300,75%,50%);
            }

            #title {
                position: absolute;
                top: 2rem;
                margin: 0 0 1rem;
                padding: 0;
            }

            #pitch {
                position: absolute;
                width: 100vw;
                height: 100vh;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: 0;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            #pitch-pane {
                background-color: hsl(300,75%,33%);
                color: #fff;
                border-radius: 50%;
                height: 6rem;
                width: 6rem;
                display: flex;
                flex-flow: column nowrap;
                align-items: center;
                justify-content: center;
            }

            #note-target { 
                margin: 0;
                font-size: 1.75em;
                font-weight: bold;
            }

            #hz-target {
                opacity: .75;
            }

            #hz-current {
                position: absolute;
                z-index: 3;
                text-align: center;
                background-color: hsl(100,75%,66%);
                color: hsl(100,75%,10%);
                padding: .25rem .75rem;
                transition: all .5s;
                bottom: 50%;
                left: 0;
                display: inline-block;
                width: auto;
                margin: 0 0 -.75rem;
            }

            #hz-current::after {
                content: '';
                background-color: hsl(100,75%,66%);
                width: 1rem;
                height: 1rem;
                display: block;
                transform: rotate(45deg);
                position: absolute;
                right: -.5rem;
                top: .25rem;
            }

            #canvas-soundinfo {
                position: absolute;
                width: 100vw;
                height: 100vh;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: 0;
                z-index: 1;
            }

            footer {
                position: absolute;
                bottom: -3rem;
                left: 0;
                width: 100vw;
                height: 7rem;
                z-index: 4;
                transition: all .33s;
                padding: 0 1rem;
                box-sizing: border-box;
                text-align: center;
            }

            #about.open {
                bottom: 0;
            }

            #toggle {
                display: block;
                transform: rotate(270deg);
                color: #fff;
                transition: all .33s;
                font-size: 1.5em;
            }

            #about.open #toggle {
                transform: rotate(90deg);
            }

            #toggle-text {
                display: block;
                color: #fff;
                opacity: 1;
                transition: all .33s;
            }

            #about.open #toggle-text {
                opacity: 0;
            }

        </style>
    </head>
    <body>

        <main>
    
            <h1 id="title">Audio tuner</h1>                

            <div id="pitch">
                <div id="pitch-pane">
                    <span id="note-target">?</span> 
                    <span id="hz-target"></span>    
                </div>
            </div>

            <div id="hz-current">- hz</div>

            <canvas id="canvas-soundinfo" height="256" width="2048"></canvas>

        </main>

        <footer id="about">
            <h1>
                <button onclick="toggleAbout();">
                    <span id="toggle">➔</span>
                    <span id="toggle-text">tell me more</span>
                </button>
            </h1>
            <p>Made by <a href="github.com/iamfrank">Frank Thomsen</a> using skills and a text editor.</p>
        </footer>

        <script>

            var notes = calcNotes(),
                current_note = notes[9],
                pitch_samples = [],
                note_target = document.getElementById('note-target'),
                hz_target = document.getElementById('hz-target'),
                hz_current = document.getElementById('hz-current');

            function calcNotes() {
                var notes = [],
                    i = 1;
                for (var octave = 0; octave <= 8; octave++) {
                    // Calc sets of notes for 8 octaves
                    for (var halfnote = 1; halfnote <= 12; halfnote++ ) {
                        var note = {
                            key: '',
                            octave: octave,
                            hz: 0
                        };        
                        switch(halfnote) {
                            case 1:
                                note.key = 'C';
                                break;
                            case 2:
                                note.key = 'C#';
                                break;
                            case 3:
                                note.key = 'D';
                                break;
                            case 4:
                                note.key = 'Eb';
                                break;
                            case 5:
                                note.key = 'E';
                                break;
                            case 6:
                                note.key = 'F';
                                break;
                            case 7:
                                note.key = 'F#';
                                break;
                            case 8:
                                note.key = 'G';
                                break;
                            case 9:
                                note.key = 'Ab';
                                break;
                            case 10:
                                note.key = 'A';
                                break;
                            case 11:
                                note.key = 'A#';
                                break;
                            case 12:
                                note.key = 'B';
                                break;
                            default:
                                console.log('something went wrong');
                        };
                        note.hz = Math.round(Math.pow(2,((i-58)/12)) * 440);
                        if (notes.length > 1) {
                            note.hz_range = (note.hz - notes[i-2].hz) * 2;
                        }
                        notes.push(note);
                        i++;
                    };
                };
                console.log('An array of notes:');
                console.log(notes);
                return notes;
            };


            function getAndDisplayAudioContext(stream) {

                // create audio context and analyser
                var actx = new (window.AudioContext || window.webkitAudioContext)(), 
                    analyser = actx.createAnalyser(),
                    sampleRate = actx.sampleRate,
                    mic = actx.createMediaStreamSource(stream),
                    canvas = document.getElementById("canvas-soundinfo"),
                    ctx = canvas.getContext("2d"), // Get canvas context;
                    lastItem = null,
                    lastPos = null;

                function draw() {
                    let signal_str = 0;
                    requestAnimationFrame(draw);
                    analyser.getByteTimeDomainData(dataArray);
                    ctx.clearRect(0,0,canvas.width, canvas.height);

                    dataArray.forEach((item, i) => {
                        if (item > 128 && lastItem <= 128) { // we have crossed below the mid point
                            const elapsedSteps = i - lastPos; // how far since the last time we did this
                            const pitch = Math.round( sampleRate / elapsedSteps );
                            lastPos = i;
                            pitch_samples.push(pitch);
                        };
                        ctx.fillRect(i, item, 1, 1);
                        lastItem = item;
                    });
                };

                ctx.fillStyle = 'white';
                analyser.fftSize = 4096;
                analyser.smoothingTimeConstant = 1;
                var dataArray = new Uint8Array(analyser.fftSize);

                // Connect microphone to analyser
                mic.connect(analyser);

                // Visualise audio using analyser data
                draw();
            };


            function calcNote(hz) {
                var n = Math.round(12*(Math.log2(hz/440))+57),
                    note = notes[n];
                return note;
            };


            function analysePitch(samples_arr) {
                samples_arr = samples_arr.sort( function(a,b) {return a - b;} );

                let idx = Math.floor(samples_arr.length/2),
                    median_hz = samples_arr[idx];

                if (idx > 0) {
                    visualizePitch(median_hz);
                }
                pitch_samples = [];
                setTimeout(function() {
                    analysePitch(pitch_samples);
                }, 300);
            };


            function visualizePitch(hz) {
                if (hz > 16 && hz < 7902) {

                    var note = calcNote(hz),
                        ratio = (hz - note.hz) / note.hz_range * 100;
                    
                    note_target.innerHTML = note.key + '<sub>' + note.octave + '</sub>';
                    hz_target.innerHTML = note.hz + 'hz';
                    hz_current.innerHTML = hz + 'hz';
                    hz_current.style.bottom = (ratio+50) + '%';

                } else {
                    note_target.innerHTML = '?';
                    hz_target.innerHTML = '';
                    hz_current.style.bottom = '50%';
                    hz_current.innerHTML = '- hz';
                }
            };


            function checkWebAudioCapability() {
                if (navigator.mediaDevices) {
                    navigator.mediaDevices.getUserMedia({ audio: true })
                        .then(function(stream) {
                            analysePitch(pitch_samples);
                            getAndDisplayAudioContext(stream)
                        })
                        .catch(function(err) {
                            console.log(err)
                        })
                };
            };


            function toggleAbout() {
                var about = document.getElementById('about');
                about.classList.toggle('open');
            }


            checkWebAudioCapability();

        </script>

    </body>
</html>