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 audioContext = new AudioContext();
-		const analyser = audioContext.createAnalyser();
+	const analyser = audioContext.createAnalyser();
-		const microphone = audioContext.createMediaStreamSource(stream);
+	const microphone = audioContext.createMediaStreamSource(stream);
-		const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+	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;
+document.querySelector('#start').addEventListener('click', ()=>{
-		analyser.fftSize = 1024;
+	startTime = Date.now();
 	timerInterval = window.setInterval(updateTimerDisplay,1000);
 })
-		microphone.connect(analyser);
+document.querySelector('#stop').addEventListener('click', ()=>{
-		analyser.connect(scriptProcessor);
+	window.clearInterval(timerInterval);
-		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);
 	});
--- 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>