Trouble with st.audio in Safari

Using Streamlit
1

Hi! I’ve been having a blast with streamlit.

I am working on an app that plays WAV audio files generated from numpy data arrays. st.audio works great for this in Chrome and Firefox, but the audio files won’t load in Safari. I wonder if this is a known issue, or if anyone has hints for making it work?

For reference, draft app is here:
https://share.streamlit.io/jkanner/streamlit-audio/main/app.py

Thank you for any help!

2

I have had similar experiences where audio/video media doesn’t work in Safari. I’ve also found several components that work great in Chrome and Firefox but not at all in Safari. This is perhaps not such a travesty for MacOS where browser choice is more prevalent but the same issues occur on iOS devices where Safari is dominant and is largely the only used browser. Since I’m not the only one experiencing this, I’ve opened up an issue here: https://github.com/streamlit/streamlit/issues/2139

Super cool app by the way.

2 Likes
3

@theimposingdwarf Thank you!

4

Hey @jonah! Can you test on the streamlit-nightly? You can install it by uninstalling streamlit and run pip install streamlit-nightly.

To explain the problem, Safari requires the server to support Range Requests. We found this problem with regard to videos, so I am sure this would also apply to audio

See https://github.com/streamlit/streamlit/issues/1804#issuecomment-687328551

If it works great, it will be included in the next release.

5

@kmcgrady Wonderful!

I tested my app locally using streamlit-nightly, and the audio works in Safari, Chrome, AND Firefox. This looks like an excellent fix. Thank you!

1 Like
6

@kmcgrady It looks like there’s a recent release of streamlit (0.69) that should include this fix. But, requiring this version in requirements.txt on share.streamlit.io did not seem to fix the issue with audio components in Safari. I’m probably missing a simple step to get the latest version, but I’m not sure what else to try. Any hints would be a big help.

Thanks again!

7

I’m on Streamlit v0.69.2 and don’t see this issue locally but I haven’t tried deploying it yet.

8

@jonah @theimposingdwarf I looked into it. Streamlit Share adds some security and restricts the set of request/response headers. These end up blocking the important headers needed. I’ve asked them to fix them with a suggested fix. Hopefully this get’s fixed soon.

Thanks for trying out Streamlit Share!

1 Like
9

@kmcgrady @theimposingdwarf Great! Thank you both for the quick response to this.

10

@jonah Tested my change out and everything works. The plan is to deploy it late next week.

1 Like