finn Posts - Answer Overflow

finn

•Created by finn on 5/23/2024 in #👟framework

AudioWorklet not loading in CSUI, works in popup

Hey guys, I'm having an issue using AudioWorklet in the context of Content Script UI. We're having trouble connecting our audio processor (with worklet.addModule) in our CSUI component (but not in our popup.tsx). Here is the offending code:

async startRecording(): Promise<void> {
    if (this.isRecording) {
      console.warn("Audio recording is already in progress.");
      return;
    }

    if (!this.isBrowserSupported()) {
      throw new Error("Browser does not support the required APIs for audio recording.");
    }

    try {
      this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this.micAccessGranted = true;
      this.audioContext = new AudioContext(this.isFirefox ? {} : { sampleRate: AudioRecorder.SAMPLE_RATE });
      await this.audioContext.audioWorklet.addModule(this.audioProcessorUrl); // this line is failing with Error starting audio recording: DOMException: The user aborted a request.
      this.actualSampleRate = this.audioContext.sampleRate;
      this.processorNode = new AudioWorkletNode(this.audioContext, "audio-stream-processor");
      this.setupAudioProcessing();
      this.isRecording = true;
    } catch (error) {
      console.error("Error starting audio recording:", error);
      this.micAccessGranted = false;
      throw error;
    }
  }

async startRecording(): Promise<void> {
    if (this.isRecording) {
      console.warn("Audio recording is already in progress.");
      return;
    }

    if (!this.isBrowserSupported()) {
      throw new Error("Browser does not support the required APIs for audio recording.");
    }

    try {
      this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this.micAccessGranted = true;
      this.audioContext = new AudioContext(this.isFirefox ? {} : { sampleRate: AudioRecorder.SAMPLE_RATE });
      await this.audioContext.audioWorklet.addModule(this.audioProcessorUrl); // this line is failing with Error starting audio recording: DOMException: The user aborted a request.
      this.actualSampleRate = this.audioContext.sampleRate;
      this.processorNode = new AudioWorkletNode(this.audioContext, "audio-stream-processor");
      this.setupAudioProcessing();
      this.isRecording = true;
    } catch (error) {
      console.error("Error starting audio recording:", error);
      this.micAccessGranted = false;
      throw error;
    }
  }

Any help appreciated.

2 replies

Gaming

Programming