Skip to content

Instantly share code, notes, and snippets.

@hosackm
Created September 2, 2015 22:30
Show Gist options
  • Save hosackm/289814198f43976aff9b to your computer and use it in GitHub Desktop.
Save hosackm/289814198f43976aff9b to your computer and use it in GitHub Desktop.
Flask streaming an audio file
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)
@sanjeevghimire
Copy link

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

@georgelzh
Copy link

Thank you!

@dcxcchen
Copy link

Thanks.

@MakeMike
Copy link

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

@hosackm
Copy link
Author

hosackm commented Feb 11, 2021

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">

@MakeMike
Copy link

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.

@MakeMike
Copy link

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?

@hosackm
Copy link
Author

hosackm commented Feb 11, 2021

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.

@DurgeshMajeti
Copy link

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.

@jainamoswal
Copy link

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. 👀


@vatssv
Copy link

vatssv commented Sep 17, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment