show cents sharp/flat

1 year ago · 33a1d49c57
parent bf41389360
commit 33a1d49c57
2 changed files with 29 additions and 1 deletions
--- a/analyze.js
+++ b/analyze.js
@ -1,5 +1,22 @@
 document.querySelector('#analyze-pitch button').addEventListener('click', startListening);

+const calculateCent = (frequency) => {
+	return frequency * 2 ** (1/1200) - frequency
+}
+
+const getCentDifference = (startingFrequency, newFrequency) => {
+	const frequencyDifference = newFrequency - startingFrequency
+	const cent = calculateCent(startingFrequency)
+
+	return frequencyDifference/cent 
+}
+
+const generateCentsString = (centDifference) => {
+	console.log(centDifference);
+	const flatSharpChar = (centDifference > 0) ? '&sharp;' : '&flat;'
+	return flatSharpChar + Math.abs(parseInt(centDifference)).toString().padStart(2, '0')
+}
+
 function startListening() {
 	navigator.mediaDevices.getUserMedia({ audio: true, video: false })
 		.then(stream => {
@ -19,7 +36,10 @@ function startListening() {
 				const buffer = new Float32Array(analyser.fftSize);
 				analyser.getFloatTimeDomainData(buffer);
 				const pitch = autoCorrelate(buffer, audioContext.sampleRate);
-				document.querySelector('#analyze-pitch dd').textContent = pitch.toFixed(2);
+				if(pitch != -1){
+					document.querySelector('#analyze-pitch dd:nth-of-type(1)').textContent = pitch.toFixed(2)
+					document.querySelector('#analyze-pitch dd:nth-of-type(2)').innerHTML = generateCentsString(getCentDifference(newTone, pitch))
+				}
 			};
 		})
 		.catch(err => {
--- a/index.html
+++ b/index.html
@ -7,6 +7,12 @@
 	<script src="teoria.js"></script>
 	<script src="app.js" defer></script>
 	<script src="analyze.js" defer></script>
+	<style>
+		body {
+			font-family: monospace;
+			line-height:2em;
+		}
+	</style>
 </head>
 <body>
 	<h1>Tuner</h1>
@ -28,6 +34,8 @@
 		<dl>
 			<dt>Pitch:</dt>
 			<dd></dd>
+			<dt>Cents flat/sharp</dt>
+			<dd></dd>
 		</dl>
 	</section>
 </body>