basic timer. display mic volume

2 years ago · 91177c3f2a
parent 433f92efcc
commit 91177c3f2a
2 changed files with 45 additions and 24 deletions
--- a/app.js
+++ b/app.js
@ -1,27 +1,41 @@
+let timerInterval = null;
+let startTime = null;
+
 navigator.mediaDevices.getUserMedia({
 	audio: true
 }).then((stream) => {
-		const audioContext = new AudioContext();
-		const analyser = audioContext.createAnalyser();
-		const microphone = audioContext.createMediaStreamSource(stream);
-		const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+	const audioContext = new AudioContext();
+	const analyser = audioContext.createAnalyser();
+	const microphone = audioContext.createMediaStreamSource(stream);
+	const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+
+	analyser.smoothingTimeConstant = 0.8;
+	analyser.fftSize = 1024;
+
+	microphone.connect(analyser);
+	analyser.connect(scriptProcessor);
+	scriptProcessor.connect(audioContext.destination);
+	setInterval(() => {
+		const array = new Uint8Array(analyser.frequencyBinCount);
+		analyser.getByteFrequencyData(array);
+		const arraySum = array.reduce((a, value) => a + value, 0);
+		const average = arraySum / array.length;
+		document.querySelector('#mic').innerHTML = Math.round(average);
+	}, 1000)
+})
+.catch((err) => {
+	console.error(err);
+});
+
+const updateTimerDisplay = ()=>{
+	document.querySelector('#seconds').innerHTML = Math.floor((Date.now() - startTime)/1000)
+}

-		analyser.smoothingTimeConstant = 0.8;
-		analyser.fftSize = 1024;
+document.querySelector('#start').addEventListener('click', ()=>{
+	startTime = Date.now();
+	timerInterval = window.setInterval(updateTimerDisplay,1000);
+})

-		microphone.connect(analyser);
-		analyser.connect(scriptProcessor);
-		scriptProcessor.connect(audioContext.destination);
-		setInterval(() => {
-			const array = new Uint8Array(analyser.frequencyBinCount);
-			analyser.getByteFrequencyData(array);
-			const arraySum = array.reduce((a, value) => a + value, 0);
-			const average = arraySum / array.length;
-			console.log(Math.round(average));
-			// colorPids(average);
-		}, 1000)
-	})
-	.catch((err) => {
-		/* handle the error */
-		console.error(err);
-	});
+document.querySelector('#stop').addEventListener('click', ()=>{
+	window.clearInterval(timerInterval);
+})
--- a/index.html
+++ b/index.html
@ -3,9 +3,16 @@
 <head>
 	<meta charset="UTF-8">
 	<title></title>
-	<script src="app.js"></script>
+	<script defer src="app.js"></script>
 </head>
 <body>
-	
+	<dl>
+		<dt>Mic Level</dt>
+		<dd id="mic"></dd>
+		<dt>Seconds Recorded</dt>
+		<dd id="seconds"></dd>
+	</dl>
+	<button id="start">Start Timer</button>
+	<button id="stop">Stop Timer</button>
 </body>
 </html>