Phone call website failing to load individual audio blobs

I'm working on a flask/ quart app that records your voice on one page, stores it in JSON and on the other page it loads the JSON and sends it to the page to load it in. I'm doing this with websockets to make it more like a phone call. So every (timeframe) it sends the data to the page and load it to instantly play it like a phone call.

Here are some code snippets of what I have:

The endpoints:

@app.websocket('/listen')async def call_socket():    await websocket.accept()    print("ws")    try:        datalist = json.load(open("queue.json"))        for i in range(len(datalist)):            data = base64.b64decode(datalist[str(i)].encode())            await websocket.send(data)            datalist.pop(str(i))            with open("queue.json", "w") as f:                json.dump(datalist, f, indent=4)            time.sleep(1)@app.websocket('/call')async def websocket_endpoint():    await websocket.accept()    try:        index = 0        while True:            data = await websocket.receive()            datalist = json.load(open("queue.json"))            print(str(datalist) +"aa")            datalist[str(index)] = base64.b64encode(data).decode()            index += 1            with open("queue.json", "w") as f:                json.dump(datalist, f, indent=4)

This part works and has been tested, the problem is at the receiving of data:

I first tried loading all the audioblobs and putting them together like this (it worked)

        socket.onmessage = (message) => {            audioChunks.push(message.data);            const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });            audioElement.src = blobUrl;        };

But when I tried to load the individual parts to instantly play them.

        socket.onmessage = (message) => {            blob = message.data.slice(0, message.data.size, "audio/webm;")            const blobUrl = URL.createObjectURL(blob);            audioElement.onerror = function() {                console.error('Failed to load audio:', audio.error);            };            audioElement.src = blobUrl;            audioElement.play();        };

I kept getting an error:

listen:41 Failed to load audio: MediaError {code: 4, message: 'DEMUXER_ERROR_COULD_NOT_OPEN: FFmpegDemuxer: open context failed'}audioElement.onerror @ listen:41error (asynchroon)socket.onmessage @ listen:40listen:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

I dont know what to do with this error and was hoping someone could find an oversight.