Flask streaming an audio file

flaskaudiostream.py

from flask import Flask, Response

app = Flask(__name__)


@app.route("/wav")
def streamwav():
    def generate():
        with open("signals/song.wav", "rb") as fwav:
            data = fwav.read(1024)
            while data:
                yield data
                data = fwav.read(1024)
    return Response(generate(), mimetype="audio/x-wav")


@app.route("/ogg")
def streamogg():
    def generate():
        with open("signals/song.ogg", "rb") as fogg:
            data = fogg.read(1024)
            while data:
                yield data
                data = fogg.read(1024)
    return Response(generate(), mimetype="audio/ogg")

if __name__ == "__main__":
    app.run(debug=True)

is there a client side code that is consuming this api for example in javascript?

how can I play the audio that is streaming with HTML? I can do it easily, this is the only thing holding me back

No specific client side code is required to consume this audio file. You could navigate to the endpoint in your browser. For instance, if you serve the Flask app like so:

python flaskaudiostream.py

Then you simply open your browser to http://localhost:5000/wav or http://localhost:5000/ogg which is the default development server port Flaks uses.

If you need to embed this in HTML then you'll have to run the Flask app the same way as above and then add an audio tag. Assuming the Flask app is serving this HTML as well you would write:

<audio src="/wav"></audio>
<audio src="/ogg"></audio>

Or if your HTML is served by a different server then you'll need the full path to these audio files:

<audio src="http://localhost:5000/wav">
<audio src="http://localhost:5000/wav">

No specific client side code is required to consume this audio file. You could navigate to the endpoint in your browser. For instance, if you serve the Flask app like so:

python flaskaudiostream.py

Then you simply open your browser to http://localhost:5000/wav or http://localhost:5000/ogg which is the default development server port Flaks uses.

If you need to embed this in HTML then you'll have to run the Flask app the same way as above and then add an audio tag. Assuming the Flask app is serving this HTML as well you would write:

<audio src="/wav"></audio>
<audio src="/ogg"></audio>

Or if your HTML is served by a different server then you'll need the full path to these audio files:

<audio src="http://localhost:5000/wav">
<audio src="http://localhost:5000/wav">

Thank you!!! I want to make an audio streamer, but I did not know how they worked, I did not know the client nor server side.

No specific client side code is required to consume this audio file. You could navigate to the endpoint in your browser. For instance, if you serve the Flask app like so:

python flaskaudiostream.py

Then you simply open your browser to http://localhost:5000/wav or http://localhost:5000/ogg which is the default development server port Flaks uses.

If you need to embed this in HTML then you'll have to run the Flask app the same way as above and then add an audio tag. Assuming the Flask app is serving this HTML as well you would write:

<audio src="/wav"></audio>
<audio src="/ogg"></audio>

Or if your HTML is served by a different server then you'll need the full path to these audio files:

<audio src="http://localhost:5000/wav">
<audio src="http://localhost:5000/wav">

Sorry if I am asking a lot of questions but how can I make sure that when let's say someone refreshes the sound does not restart and it starts from where it is still streaming, like real time data, is that possible with flask? or would I need sockets?

No problem. Unfortunately, what you're describing is a much more complicated problem than this gist can solve. Right now it's set up to serve the file from beginning to end when someone requests the endpoint /wav or /ogg. There's no way to start listening from any point in the file.

So, in order to do what you're describing you'd need to add two things:

1. Make the server capable of serving bytes starting from any point in the audio file.
2. Write client side code that asks for specific sections of the audio file. This way if someone restarts, like in your example, it knows to start at the bytes where it left off.

This is way beyond the scope of this gist but you can read up on byte range requests. Then you'd have to modify the server code to serve these types of requests and make a client that can make these byte range requests.

I want to upload an audio(wav) file and process it in the server. How can I do that? I dont want to record an audio. I want to take the audio input that an user gives and process it.

I want to delete that mp3 file as soon as it gets streamed.
I noticed that how streaming works :~

• First the server sends the file to client side.
• The client then streams using cache (idk much about it that how it works.)

So it doesn't matter that file still remains on server or not .
So I want to delete that music file to avoid server jamming and causing 507 errors.
What is the best option I can use ?

• after_this_request it is causing PermissionError: [WinError 32] The process cannot access the file because it is being used by another process:
• Send via headers. I found that we can only send the file as attachment, can't stream. So that we can delete file after setting headers and before return statements.
• Use crontab would be last option available.

What should I choose ?
If I'm wrong somewhere, Please correct me. 👀

---

Thank you! Worked like a charm. If someone runs into can't decode byte error, please make sure you're opening the file in 'rb' mode. I missed that the first time.