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,3 +1,6 @@
+let timerInterval = null;
+let startTime = null;
+
 navigator.mediaDevices.getUserMedia({
 	audio: true
 }).then((stream) => {
@ -17,11 +20,22 @@ navigator.mediaDevices.getUserMedia({
 		analyser.getByteFrequencyData(array);
 		const arraySum = array.reduce((a, value) => a + value, 0);
 		const average = arraySum / array.length;
-			console.log(Math.round(average));
-			// colorPids(average);
+		document.querySelector('#mic').innerHTML = Math.round(average);
 	}, 1000)
 })
 .catch((err) => {
-		/* handle the error */
 	console.error(err);
 });
+
+const updateTimerDisplay = ()=>{
+	document.querySelector('#seconds').innerHTML = Math.floor((Date.now() - startTime)/1000)
+}
+
+document.querySelector('#start').addEventListener('click', ()=>{
+	startTime = Date.now();
+	timerInterval = window.setInterval(updateTimerDisplay,1000);
+})
+
+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>