I am trying to implement real-time playback of my guitar on my Angular front-end (trying to make a web guitar amp). However, the audio that I am getting is extremely jittery and seems to randomly cut-off, making for a really poor listening experience.

I am using WebAudioApi to play the audio stream coming from the audio interface that my guitar is plugged into. I experimented with changing the sampling and buffer size, but no combination helped. Here is my audio playback service.

private audioContext: AudioContext | null = null;
    private mediaStreamSource: MediaStreamAudioSourceNode | null = null;

    constructor() {}

    private createAudioContext(): void {
        if (!this.audioContext || this.audioContext.state === 'closed') {
            this.audioContext = new AudioContext();
        }
    }

    async getAudioInputDevices(): Promise<MediaDeviceInfo[]> {
        const devices = await navigator.mediaDevices.enumerateDevices();
        return devices.filter(device => device.kind === 'audioinput');
    }

    async initAudioStream(deviceId?: string): Promise<void> {
        this.createAudioContext();

        const constraints = {
            audio: deviceId ? { deviceId: { exact: deviceId } } : true
        };

        try {
            const stream = await navigator.mediaDevices.getUserMedia(constraints);
            if (!this.audioContext) throw new Error('Audio context is not initialized.');
            this.mediaStreamSource = this.audioContext.createMediaStreamSource(stream);
            this.mediaStreamSource.connect(this.audioContext.destination); // Connects to speakers to output sound
        } catch (error) {
            console.error('Error accessing microphone', error);
        }
    }

    closeAudioStream(): void {
        if (this.mediaStreamSource) {
            this.mediaStreamSource.disconnect();
            this.mediaStreamSource = null;
        }

        if (this.audioContext) {
            this.audioContext.close();
            this.audioContext = null;
        }
    }

I also tried playing back audio from my laptop’s microphone, and the same problem happens, so it isn’t an interface issue. The browser that I’m testing on is Brave (not sure if relevant). Any help would be greatly appreciated!