License added.

LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Chris Wilson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,6 +2,6 @@
 
 I whipped this app up to start experimenting with pitch detection, and also to test live audio input.  It used to perform a naive (zero-crossing based) pitch detection algorithm; now it uses a naively-implemented auto-correlation algorithm in realtime, so it should work well with most monophonic waveforms (although strong harmonics will throw it off a bit).  It works well with whistling (which has a clear, simple waveform); it also works pretty well to tune my guitar.
 
-Check it out, feel free to fork, submit pull requests, etc.
+Check it out, feel free to fork, submit pull requests, etc.  MIT-Licensed - party on.
 
 -Chris

index.html

@@ -9,10 +9,10 @@
 .droptarget { background-color: #348781}
 div.confident { color: black; }
 div.vague { color: lightgrey; }
-#note { display: inline-block; width: 1em; text-align: left;}
+#note { display: inline-block; height:180px; text-align: left;}
 
-#detector { width: 300px; height: 300px; border: 4px solid gray; border-radius: 8px; text-align: center;}
-#output { position: absolute; width: 300px; height: 300px; }
+#detector { width: 300px; height: 300px; border: 4px solid gray; border-radius: 8px; text-align: center; padding-top: 10px;}
+#output { width: 300px; height: 42px; }
 #flat { display: none; }
 #sharp { display: none; }
 .flat #flat { display: inline; }
@@ -29,9 +29,9 @@
 <!--<button onclick="updatePitch(0);">sample</button>-->
 
 <div id="detector" class="vague">
-<canvas id="output"></canvas>
 <div class="pitch"><span id="pitch">--</span>Hz</div>
 <div class="note"><span id="note">--</span></div>   
+<canvas id="output" width=300 height=42></canvas>
 <div id="detune"><span id="detune_amt">--</span><span id="flat">cents &#9837;</span><span id="sharp">cents &#9839;</span></div>
 </div>
 <a href="https://github.com/cwilso/pitchdetect" style="position: absolute; z-index:2; top: 0; right: 0; border: 0;"><img src="img/forkme.png" alt="Fork me on GitHub"></a>

js/pitchdetect.js

@@ -1,14 +1,42 @@
+/*
+The MIT License (MIT)
+
+Copyright (c) 2014 Chris Wilson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
 var audioContext = new AudioContext();
 var isPlaying = false;
 var sourceNode = null;
 var analyser = null;
 var theBuffer = null;
 var detectorElem, 
-	canvasElem,
+	canvasContext,
 	pitchElem,
 	noteElem,
 	detuneElem,
 	detuneAmount;
+var WIDTH=300;
+var CENTER=150;
+var HEIGHT=42;
+var confidence = 0;
+var currentPitch = 0;
 
 window.onload = function() {
 	var request = new XMLHttpRequest();
@@ -22,11 +50,11 @@ window.onload = function() {
 	request.send();
 
 	detectorElem = document.getElementById( "detector" );
-	canvasElem = document.getElementById( "output" );
 	pitchElem = document.getElementById( "pitch" );
 	noteElem = document.getElementById( "note" );
 	detuneElem = document.getElementById( "detune" );
 	detuneAmount = document.getElementById( "detune_amt" );
+	canvasContext = document.getElementById( "output" ).getContext("2d");
 
 	detectorElem.ondragenter = function () { 
 		this.classList.add("droptarget"); 
@@ -123,6 +151,7 @@ var buflen = 2048;
 var buf = new Uint8Array( buflen );
 var MINVAL = 134;  // 128 == zero.  MINVAL is the "minimum detected signal" level.
 
+/*
 function findNextPositiveZeroCrossing( start ) {
 	var i = Math.ceil( start );
 	var last_zero = -1;
@@ -158,6 +187,7 @@ function findNextPositiveZeroCrossing( start ) {
 	var t = ( 128 - buf[last_zero-1] ) / (buf[last_zero] - buf[last_zero-1]);
 	return last_zero+t;
 }
+*/
 
 var noteStrings = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
 
@@ -171,7 +201,7 @@ function frequencyFromNoteNumber( note ) {
 }
 
 function centsOffFromPitch( frequency, note ) {
-	return Math.floor( 1200 * Math.log( frequency / frequencyFromNoteNumber( note ))/Math.log(2) );
+	return ( 1200 * Math.log( frequency / frequencyFromNoteNumber( note ))/Math.log(2) );
 }
 
 // this is a float version of the algorithm below - but it's not currently used.
@@ -218,8 +248,11 @@ function autoCorrelate( buf, sampleRate ) {
 	var best_correlation = 0;
 	var rms = 0;
 
+	confidence = 0;
+	currentPitch = 0;
+
 	if (buf.length < (SIZE + MAX_SAMPLES - MIN_SAMPLES))
-		return -1;  // Not enough data
+		return;  // Not enough data
 
 	for (var i=0;i<SIZE;i++) {
 		var val = (buf[i] - 128)/128;
@@ -240,10 +273,10 @@ function autoCorrelate( buf, sampleRate ) {
 		}
 	}
 	if ((rms>0.01)&&(best_correlation > 0.01)) {
+		confidence = best_correlation * rms * 10000;
+		currentPitch = sampleRate/best_offset;
 		// console.log("f = " + sampleRate/best_offset + "Hz (rms: " + rms + " confidence: " + best_correlation + ")")
-		return sampleRate/best_offset;
 	}
-	return -1;
 //	var best_frequency = sampleRate/best_offset;
 }
 
@@ -299,34 +332,43 @@ function updatePitch( time ) {
 		);
 */
 	// possible other approach to confidence: sort the array, take the median; go through the array and compute the average deviation
-	var ac = autoCorrelate( buf, audioContext.sampleRate );
+	autoCorrelate( buf, audioContext.sampleRate );
 
 // 	detectorElem.className = (confidence>50)?"confident":"vague";
 
-	// TODO: Paint confidence meter on canvasElem here.
+	canvasContext.clearRect(0,0,WIDTH,HEIGHT);
 
- 	if (ac == -1) {
+ 	if (confidence <10) {
  		detectorElem.className = "vague";
 	 	pitchElem.innerText = "--";
 		noteElem.innerText = "-";
 		detuneElem.className = "";
 		detuneAmount.innerText = "--";
  	} else {
 	 	detectorElem.className = "confident";
-	 	pitch = ac;
-	 	pitchElem.innerText = Math.floor( pitch ) ;
-	 	var note =  noteFromPitch( pitch );
+	 	pitchElem.innerText = Math.floor( currentPitch ) ;
+	 	var note =  noteFromPitch( currentPitch );
 		noteElem.innerHTML = noteStrings[note%12];
-		var detune = centsOffFromPitch( pitch, note );
+		var detune = centsOffFromPitch( currentPitch, note );
 		if (detune == 0 ) {
 			detuneElem.className = "";
 			detuneAmount.innerHTML = "--";
+
+			// TODO: draw a line.
 		} else {
-			if (detune < 0)
-				detuneElem.className = "flat";
+			if (Math.abs(detune)<10)
+				canvasContext.fillStyle = "green";
 			else
+				canvasContext.fillStyle = "red";
+
+			if (detune < 0) {
+	  			detuneElem.className = "flat";
+			}
+			else {
 				detuneElem.className = "sharp";
-			detuneAmount.innerHTML = Math.abs( detune );
+			}
+  			canvasContext.fillRect(CENTER, 0, (detune*3), HEIGHT);
+			detuneAmount.innerHTML = Math.abs( Math.floor( detune ) );
 		}
 	}