Streaming audio from FFMPEG to browser via WebSocket and WebAudioApi - ffmpeg

Question

My project has 2 parts:
a web interface that the user accesses
and a standalone app installed on the computer, that acts as a websocket server.
From the web UI, the user has to hear his computer's microphone.
At this moment, I have a working solution that listens to microphone and sends the raw PCM audio chunks back to web-UI which is able to play them. But some serious lag gets added in time, despite it all runs on the same computer, so there's no internet latency/etc. That is why I am testing FFMPEG now.
So, here's the FFMPEG command for streaming microphone data:
ffmpeg.exe -re -f dshow -i audio="Microphone (HD Pro Webcam C920)" -ar 44100 -ac 1 -f f32le pipe:1
Data gets sent successfully via websocket, but playing it using WebAudioApi is not working, i mean i don't hear anything.
Can anyone point me to what am I doing wrong?
Here's the web javascript:
let ipOfAudioServer = 'localhost';
let wsClient = null;
var audioCtx = null;
var subcounter = 0;
var audiobuffer = [];
var source = null;
// must match the values in the audio-server. Thought despite audio-server could send 2channels.. we resume to only one, to save bandwidth
var sampleRate = 44100;
var channels = 1;
var microphone = 'Microphone (HD Pro Webcam C920)';
// this method reads current position from the audiobuffer and plays the audio
// the method will re-call itself, in order to play the next item in queue
this.play = function(soundName) {
var ffs = audiobuffer[subcounter];
if (ffs) {
var frameCount = ffs.byteLength;
console.log(frameCount, audiobuffer.length);
var myAudioBuffer = audioCtx.createBuffer(channels, frameCount, sampleRate);
myAudioBuffer.getChannelData(0).set(ffs)
if (myAudioBuffer != null)
{
subcounter += 1;
source = audioCtx.createBufferSource();
source.buffer = myAudioBuffer;
source.connect(audioCtx.destination);
source.onended = () => { console.log("finished, continuing to seek buffer!"); play(soundName); }
source.start();
}
}
// just in case the counter got to be bigger than the actual amount of items in the list, set it back to last one
if (subcounter > audiobuffer.length)
subcounter = audiobuffer.length;
};
// the method to initialize WS client
this.initWebsocketClient = function ()
{
if (wsClient == null)
{
wsClient = new WebSocket(`ws://${ipOfAudioServer}:23233`, "protocol");
wsClient.binaryType = "arraybuffer";
wsClient.onmessage = function (event)
{
if (typeof event.data === 'object') {
console.log(event.data, event.data.size);
// clear memory in case buffer is already too big
if (subcounter > 50) {
console.log('cleared memory');
audiobuffer = [];
subcounter = 0;
}
audiobuffer.push(event.data);
if (audiobuffer.length == 1) {
play('sinewave');
}
}
else {
if (event.data == 'stopMicrophone=ok') {
wsClient.close();
wsClient = null;
audiobuffer = [];
subcounter = 0;
}
console.log(event.data);
}
}
}
};
// method used in send() which will actually send the message only after connection has been established successfully.
this.waitForConnection = function (callback, interval) {
if (wsClient.readyState === 1) {
callback();
} else {
var that = this;
// optional: implement backoff for interval here
setTimeout(function () {
that.waitForConnection(callback, interval);
}, interval);
}
};
// using this method to send WS messages to the audio-server
this.send = function (message, callback)
{
this.initWebsocketClient();
this.waitForConnection(function () {
wsClient.send(message);
if (typeof callback !== 'undefined') {
callback();
}
}, 1000);
};
// called by clicking the start button
function startCapture() {
if (audioCtx == null)
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
audiobuffer = [];
subcounter = 0;
this.send(`startMicrophone?device=${microphone}`);
}
// called by clicking the stop button
function stopCapture() {
this.send('stopMicrophone');
}