don't request mic access until threshold initially changed

src/components/timer.vue

@@ -77,16 +77,20 @@
 				this.running = true;
 				this.intervalID = setInterval(()=>{
 
-					const array = new Uint8Array(this.analyser.frequencyBinCount);
-					this.analyser.getByteFrequencyData(array);
-					const arraySum = array.reduce((a, value) => a + value, 0);
-					this.micLevel = arraySum / array.length;
-
-					if(this.micLevel > this.micThreshold){
-						this.micThresholdExceeded = true;
-					} else {
-						this.secondsToSubtract++;
-						this.micThresholdExceeded = false;
+					if(this.micLevel > -1){
+
+						const array = new Uint8Array(this.analyser.frequencyBinCount);
+						this.analyser.getByteFrequencyData(array);
+						const arraySum = array.reduce((a, value) => a + value, 0);
+						this.micLevel = arraySum / array.length;
+
+						if(this.micLevel > this.micThreshold){
+							this.micThresholdExceeded = true;
+						} else {
+							this.secondsToSubtract++;
+							this.micThresholdExceeded = false;
+						}
+
 					}
 
 					this.totalSeconds = getAccumulatedSeconds(Date.now(), this.startTime) - this.secondsToSubtract + this.savedPreviousSeconds;
@@ -112,33 +116,40 @@
 				this.savedPreviousSeconds = this.totalSeconds;
 				this.secondsToSubtract = 0;
 				window.localStorage.setItem('lastTotalSeconds', this.totalSeconds);
-			}
-		},
-		mounted() {
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
-				this.categories = response.data
-			})
+			},
+			activateMic(){
 
-			navigator.mediaDevices.getUserMedia({
-				audio: true
-			}).then((stream) => {
+				if(this.micThreshold > -1){
 
-				const audioContext = new AudioContext();
-				this.analyser = audioContext.createAnalyser();
-				const microphone = audioContext.createMediaStreamSource(stream);
-				const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+					navigator.mediaDevices.getUserMedia({
+						audio: true
+					}).then((stream) => {
 
-				this.analyser.smoothingTimeConstant = 0.8;
-				this.analyser.fftSize = 1024;
+						const audioContext = new AudioContext();
+						this.analyser = audioContext.createAnalyser();
+						const microphone = audioContext.createMediaStreamSource(stream);
+						const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
 
-				microphone.connect(this.analyser);
-				this.analyser.connect(scriptProcessor);
-				scriptProcessor.connect(audioContext.destination);
+						this.analyser.smoothingTimeConstant = 0.8;
+						this.analyser.fftSize = 1024;
 
+						microphone.connect(this.analyser);
+						this.analyser.connect(scriptProcessor);
+						scriptProcessor.connect(audioContext.destination);
+
+					})
+					.catch((err) => {
+						console.error(err);
+					});
+
+				}
+
+			}
+		},
+		mounted() {
+			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
+				this.categories = response.data
 			})
-			.catch((err) => {
-				console.error(err);
-			});
 
 		}
 	}
@@ -150,7 +161,8 @@
 		<em>
 			{{formatTime(totalSeconds)}}
 		</em>
-		Mic Threshold (current level: {{Math.round(micLevel)}}): <input type="number" v-model="micThreshold"/>
+		Mic Threshold (current level: {{Math.round(micLevel)}}):
+		<input type="number" @change="activateMic" v-model="micThreshold"/>
 		<button :disabled="running" @click="start">Start</button>
 		<button :disabled="!running" @click="stop">Stop</button>
 		<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>