Im trying to send audio data from a file on the server's system to a web client. The server is running Flask and has Flask-Sock installed
however, on the client side, I get an error when trying to decode the incoming data...
Uncaught (in promise) DOMException: Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data
Server
import json
import time
import wave
from app import socket
from simple_websocket.ws \
import Base as Websocket
CHUNK_SIZE = 10 * 1024
@socket.route("/stream")
def audio_stream(ws: Websocket):
while ws.connected:
raw = ws.receive()
message = json.loads(raw)
wav = wave.open(message["filename"], "rb")
sample_rate = wav.getframerate()
data = None
complete = False
while not complete:
if wav.tell() >= wav.getnframes():
complete = True
print("frame: " + str(wav.tell()))
data = wav.readframes(CHUNK_SIZE)
ws.send(data)
time.sleep(0.8 * CHUNK_SIZE / sample_rate)
wav.close()
print("finished streaming!")
Client
let context;
try{
window.AudioContext = window.AudioContext || window.webkitAudioContext
context = new AudioContext()
}catch(e) {
alert('Web Audio API is not supported in this browser')
}
function get_stream() {
const ws = new WebSocket("ws://localhost:5000/stream")
ws.onopen = () => {
// initially send information to the server to fetch the audio stream
ws.send(JSON.stringify({
filename: "example.wav"
}))
}
ws.onmessage = message => {
let blob = message.data
let reader = new FileReader()
reader.readAsArrayBuffer(blob)
reader.onload = async () => {
let arrayBuffer = reader.result
let audioBuffer = await context.decodeAudioData(arrayBuffer)
console.log(audioBuffer) // ???
}
}
}
get_stream()
Do I have to encode it someway before sending it the browser? Is it something I'm doing wrong on the server or am I not decoding properly?
EDIT 1:
It appears that I can decode the data and play it if I send the whole file... which is not really what I want, is there a way to decode partial data and add it to a buffer?