Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

488
Views
How to decode audio data with Web Audio API from blob sent from python websocket server

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?

about 4 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!