question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autoplay option for audio files

See original GitHub issue

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


Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you’d like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:28
  • Comments:16 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
tdekelvercommented, Jun 1, 2022

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!

0reactions
juanblue2022commented, Dec 2, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Autoplay guide for media and Web Audio APIs
Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users.
Read more >
HTML audio autoplay Attribute - W3Schools
The autoplay attribute is a boolean attribute. When present, the audio will automatically start playing as soon as it can do so without...
Read more >
HTML audio autoplay Attribute - Dofactory
The autoplay attribute on an <audio> tag specifies that the audio starts playing once the page is loaded. Without this attribute the user...
Read more >
HTML | <audio> autoplay Attribute - GeeksforGeeks
The HTML <audio> autoplay attribute is used to specify that the audio should automatically start playing as soon as it is loaded.
Read more >
How to make audio autoplay on chrome - Stack Overflow
You could use <iframe src="link/to/file.mp3" allow="autoplay"> ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found