Autoplay option for audio files

[mesmith027]

Request

When a user uploads an audio file via st.audio(), they then have to hit the play button to hear the audio. While this works in most cases, for interesting applications, like writing an app that takes text-to-speech, it would be reasonable to have the audio file play once automatically.

Solution

MVP: What's the smallest possible solution that would get 80% of the problem out of the way?

To have a parameter like auto_play that can be passed to the function such as st.audio(file.mp4,auto_play=True) (default is auto_play=False), that triggers the audio file to play one time after the file is finished loading.

Additional context

The conversation that sparked this Feature Request from the streamlit community

[nikhilnarasimha]

Request

When a user uploads an audio file via st.audio(), they then have to hit the play button to hear the audio. While this works in most cases, for interesting applications, like writing an app that takes text-to-speech, it would be reasonable to have the audio file play once automatically.

Solution

MVP: What's the smallest possible solution that would get 80% of the problem out of the way?

To have a parameter like auto_play that can be passed to the function such as st.audio(file.mp4,auto_play=True) (default is auto_play=False), that triggers the audio file to play one time after the file is finished loading.

Additional context

The conversation that sparked this Feature Request from the streamlit community

[oscar13ud]

Hi, i am trying to use autoplay but i have this problem, audio() got an unexpected keyword argument 'auto_play', I uninstalled and reinstalled streamlit in the last version (0.78) but it didnt work, appreciate all your advices. thanks.

[mesmith027]

Hi @oscar13ud,

This is a feature request for an autoplay function, and the MVP is demoed as a simple parameter called auto_play.

This is not in Streamlit's core functionality

[hubutui]

It would be great to add audoplay to video file too. Could streamlit add autoplay atttribute when generating the html tag video? see also https://www.w3schools.com/tags/att_video_autoplay.asp

[vblagoje]

Hi all, it would be great to have this functionality - an auto_play parameter, default is false. There have been numerous requests for it, and it seems trivial to implement. In my application, a tts model generates audio, and it would be great to have autoplay for the generated audio.

[Bomme]

This would be such a useful feature!

[durraniu]

Hi, are there any updates on the autoplay feature? I am creating a Google maps like navigation app using streamlit. I want to autoplay messages like "In 200 meters turn right". Is there a possible workaround to make the autoplay work? Thank you.

[Aakashagr]

Has anyone figured out a hack around autoplay feature without showing the controls?

[tdekelver]

I tried to add just some notification sound to my app using either:

• playsound package works locally, but on streamlit cloud the sound does not get propagated, nothing is played but no error displays neither
• print('\007') Which makes a sound as explained here

But all methods work fine locally but not on Streamlit cloud 👎

[tdekelver]

I found a workaround. You can use html code to do exactly this:

import streamlit as st
import time

html_string = """
            <audio controls autoplay>
              <source src="https://www.orangefreesounds.com/wp-content/uploads/2022/04/Small-bell-ringing-short-sound-effect.mp3" type="audio/mp3">
            </audio>
            """

sound = st.empty()
sound.markdown(html_string, unsafe_allow_html=True)  # will display a st.audio with the sound you specified in the "src" of the html_string and autoplay it
time.sleep(2)  # wait for 2 seconds to finish the playing of the audio
sound.empty()  # optionally delete the element afterwards

This will display the same widget as st.audio but will autoplay the sound once it is created. You can also afterwards remove it again by using the .empty(), but you need to time.sleep(2) to make sure it has enough time to finish autoplaying.

This works both locally as on streamlit cloud!

[xihajun]

Hi @tdekelver ,

Thanks for the code! That's really helpful. May I kindly ask do you know if it is possible to hide the audio button to make it a background music?

Best, Jun

[tdekelver]

Hi @tdekelver ,

Thanks for the code! That's really helpful. May I kindly ask do you know if it is possible to hide the audio button to make it a background music?

Best, Jun

No did not find anything...

[diahjunaidijr]

I found a workaround. You can use html code to do exactly this:

import streamlit as st
import time

html_string = """
            <audio controls autoplay>
              <source src="https://www.orangefreesounds.com/wp-content/uploads/2022/04/Small-bell-ringing-short-sound-effect.mp3" type="audio/mp3">
            </audio>
            """

sound = st.empty()
sound.markdown(html_string, unsafe_allow_html=True)  # will display a st.audio with the sound you specified in the "src" of the html_string and autoplay it
time.sleep(2)  # wait for 2 seconds to finish the playing of the audio
sound.empty()  # optionally delete the element afterwards

This will display the same widget as st.audio but will autoplay the sound once it is created. You can also afterwards remove it again by using the .empty(), but you need to time.sleep(2) to make sure it has enough time to finish autoplaying.

This works both locally as on streamlit cloud!

sorry, i beg your permission, what if we want to play file from local with autoplay feature?

[ayanatherate]

Hi, any

html_string = """
            <audio controls autoplay>
              <source src="https://www.orangefreesounds.com/wp-content/uploads/2022/04/Small-bell-ringing-short-sound-effect.mp3" type="audio/mp3">
            </audio>
            """

sound = st.empty()
sound.markdown(html_string, unsafe_allow_html=True)  # will display a st.audio with the sound you specified in the "src" of the html_string and autoplay it
time.sleep(2)  # wait for 2 seconds to finish the playing of the audio
sound.empty()  # op

Hey, that's a cool solution! Any idea on how to play a local audio file using the same html code? I'm not that proficient in html so kindly pardon me.

[blackary]

@ayanatherate Using local audio is trickier, because normally that src is expecting a url. But, it also works with a base64-encoded file, like this:

import base64

import streamlit as st


def autoplay_audio(file_path: str):
    with open(file_path, "rb") as f:
        data = f.read()
        b64 = base64.b64encode(data).decode()
        md = f"""
            <audio controls autoplay="true">
            <source src="data:audio/mp3;base64,{b64}" type="audio/mp3">
            </audio>
            """
        st.markdown(
            md,
            unsafe_allow_html=True,
        )


st.write("# Auto-playing Audio!")

autoplay_audio("local_audio.mp3")

[juanblue2022]

I found a solution to not show the player: <audio autoplay> instead of <audio controls autoplay>

[gustavz]

@blackary thank you for that workaround. Is it possible to play the sound without showing the audio player widget at all?

[blackary]

@gustavz If you use the solution that @juanblue2022 provided (removing controls) it should work

import base64

import streamlit as st


def autoplay_audio(file_path: str):
    with open(file_path, "rb") as f:
        data = f.read()
        b64 = base64.b64encode(data).decode()
        md = f"""
            <audio autoplay="true">
            <source src="data:audio/mp3;base64,{b64}" type="audio/mp3">
            </audio>
            """
        st.markdown(
            md,
            unsafe_allow_html=True,
        )


st.write("# Auto-playing Audio!")

autoplay_audio("local_audio.mp3")

[RickyEsclapon]

I was struggling with this as well. In my case I was producing an audio file from Python and I didn't want to save it to a file. After a lot of banging my head against the wall, this ended up working:

import base64

audio_base64 = base64.b64encode(audio_bytes).decode('utf-8')
audio_tag = f'<audio autoplay="true" src="data:audio/wav;base64,{audio_base64}">'
st.markdown(audio_tag, unsafe_allow_html=True)

[hAcKlyc]

@gustavz If you use the solution that @juanblue2022 provided (removing controls) it should work

import base64

import streamlit as st


def autoplay_audio(file_path: str):
    with open(file_path, "rb") as f:
        data = f.read()
        b64 = base64.b64encode(data).decode()
        md = f"""
            <audio autoplay="true">
            <source src="data:audio/mp3;base64,{b64}" type="audio/mp3">
            </audio>
            """
        st.markdown(
            md,
            unsafe_allow_html=True,
        )


st.write("# Auto-playing Audio!")

autoplay_audio("local_audio.mp3")

There still is a problem, when I use this code for TTS audio. First time, It works. But when i type in another text ,I saw the code running, It gen the audio bytes and run this autoplay code, but there is no voice.... But refresh the page, the first time ,it works....It's weird...

[shawngiese]

I think it may have something to do with the way streamlit reruns code. I save the audio content to memory and set auto play on that. I think that because the contents are changing during the reruns it is being picked up

[dnabanita7]

It doesn't work for me. I have the newest streamlit version. should I downgrade it?

[jrieke]

Update

Hey all! We didn't work on this in the past since it's unfortunately more complicated than it seems. We can of course only add the HTML autoplay option. But that will be confusing in Streamlit: if you rerun the app without changing it, that will not trigger autoplay again on an existing audio element, which makes sense. But if you add an element above the audio element, Streamlit is removing the audio element from the page and re-adding it, which will trigger autoplay again. That's a very confusing developer experience.

We're currently looking into if there's some workaround to this behavior. Will update here if we have some new ideas!

[michelle-w-br]

above mentioned ways only works on my localhost perfectly, but once deployed, it doesn't play the sound for the deployed app, weird