I am trying to implement a function where one client can record audio (MediaRecorder) and send it to a server. The server then creates a link where a different client can download the live stream.

And this all working fine, except for one detail: The stream is delayed by around 4 seconds. I think this has to do with the buffering of the audioNode.

Here is what I think is happening: The audioNode waits until 4 seconds of sound is available. Since the sound is created live, it has to wait 4 seconds for the data to be available.

So my question is: how can I disable or reduce the buffersize of an audioNode?

I am using electron as my "browser" or however it is called.

The http request (download stream) looks like this:

In the javascript code I simply attach the link to my sourceNode:

    audioNode = document.getElementById("callAudio")
    audioNode.volume = 1.0
    const audioSourceNode = document.getElementById("callAudioSource")
    const audioContext = new window.AudioContext()
    const audioTrack = audioContext.createMediaElementSource(audioNode)
    const audioGain = audioContext.createGain()
    const audioDestination = audioContext.createMediaStreamDestination();
    const audioTrack.connect(audioGain).connect(audioDestination)

    audioSourceNode.setAttribute("src", "http://localhost:12347")
    audioNode.load()
    audioNode.play().then(() => {
        console.debug("started playing after:", currentTime)
        playing = true
    })

The audioNode itself looks like this:

<audio controls id="callAudio" class="audioControls" crossorigin="anonymous" preload="none">
        <source src="" id="callAudioSource"></src>
</audio>

The debug tells me that it took roughly 4.2 seconds to start playing.

When I look at this stream from the perspective of my server, then I see that I have delay of less than 10ms. So, this cannot be due to the server producing a delay.