Channel Streamer Erorr Enhancement of error handling

nuxt.config.ts

@@ -8,7 +8,9 @@ import fs from 'fs'
 export default defineNuxtConfig({
 
     
-
+    alias: {
+        '@': path.resolve(__dirname, ''),
+      },
 
     devServer: {
              

pages/ChannelStreamer.vue

@@ -18,53 +18,67 @@ export default {
   },
   methods: {
     async startMicrophone() {
-
-        this.audioContext = new window.AudioContext ();
-
-        // Request access to the microphone
-        this.microphoneStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
-        // Check if the microphone stream is available
-        if (!this.microphoneStream) {
-          console.error("Microphone stream is not available.");
-          this.errorMessage = "Microphone stream is not available.";
-          return;
-        }
-
-        // Ensure that the microphoneStream is a MediaStream object
-        if (!(this.microphoneStream instanceof MediaStream)) {
-          console.error("Invalid microphone stream.");
-          this.errorMessage = "Invalid microphone stream.";
-          return;
-        }
-
-        // Create a MediaStreamAudioSourceNode from the microphone stream
-        const microphoneSource = this.audioContext.createMediaStreamSource(this.microphoneStream);
-        await this.audioContext.audioWorklet.addModule('@/plugins/octave.js');
-        this.audioProcessorNode = new AudioWorkletNode(this.audioContext, 'octave');
-        microphoneSource.connect(this.audioProcessorNode);
-        this.audioProcessorNode.connect(this.audioContext.destination);
-        // Try to add the Audio Worklet module
-
+      try {
+        this.initializeAudioContext();
+        await this.requestMicrophoneAccess();
+        await this.setupAudioProcessing();
+      } catch (error) {
+        console.error('Error starting microphone:', error.message);
+        this.errorMessage = error.message;
+      }
     },
     stopMicrophone() {
+      this.cleanup();
+    },
+    initializeAudioContext() {
+      this.audioContext = new window.AudioContext();
+    },
+    async requestMicrophoneAccess() {
+      try {
+        this.microphoneStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      } catch (error) {
+        console.error('Error accessing microphone:', error.message);
+        this.errorMessage = 'Microphone access denied. Please grant permission in your browser settings.';
+        throw new Error('Microphone access denied.');
+      }
+
+      if (!this.microphoneStream || !(this.microphoneStream instanceof MediaStream)) {
+        throw new Error('Microphone stream is not available.');
+      }
+    },
+    async setupAudioProcessing() {
+  try {
+    const microphoneSource = this.audioContext.createMediaStreamSource(this.microphoneStream);
+    await this.audioContext.audioWorklet.addModule('@/plugins/octave.js');
+
+    //this.audioProcessorNode = new AudioWorkletNode(this.audioContext, 'octave');
+    //microphoneSource.connect(this.audioProcessorNode);
+    //this.audioProcessorNode.connect(this.audioContext.destination);
+  } catch (error) {
+    console.error('Error setting up audio processing:', error.message);
+    this.errorMessage = 'Error setting up audio processing. Please check your microphone and try again.';
+    throw new Error('Audio processing setup failed.');
+  }
+  },
+    cleanup() {
       if (this.audioContext) {
-        // Disconnect and close the AudioWorkletNode
         if (this.audioProcessorNode) {
           this.audioProcessorNode.disconnect();
           this.audioProcessorNode.port.postMessage({ command: 'stop' });
         }
-
-        // Close the AudioContext
         this.audioContext.close();
-
-        // Reset variables
-        this.audioContext = null;
-        this.microphoneStream = null;
-        this.audioProcessorNode = null;
-        this.errorMessage = null;
+        this.resetVariables();
       }
     },
+    resetVariables() {
+      this.audioContext = null;
+      this.microphoneStream = null;
+      this.audioProcessorNode = null;
+      this.errorMessage = null;
+    },
+  },
+  beforeDestroy() {
+    this.cleanup();
   },
 };
 </script>

pages/octave.js

@@ -1,3 +1,4 @@
+console.log('Octave module loaded successfully!');
 new AudioWorkletProcessor ()
 
 class OctaveBandProcessor extends AudioWorkletProcessor {