Autoplay and controls properties for audio and video

Using Streamlit
1

Problem:

I have an app with a few audios (OGG bytes-like stored in a db). Works just fine if user press the play button using st.audio(mybytes). But I need this to autoplay, without showing those controls.

I tried to hack the tag using js code, but couldn’t have it done even if using unsafe_allow_html. Probably injection of js is not yet allowed.

string="""
<button onclick='myFunction()'>Try it</button>
<script>function myFunction() {alert('Hello, world!');}</ script >
"""
st.markdown(string, unsafe_allow_html=True)

I then tried to create my own HTML using markdown, but in this case, I can’t use my bytes-like object without prior writing it to disk.

Expected (sth like):

st.audio(mybytes, format='audio/ogg', autoplay=True, controls=False)

Have anyone solved this kind of problem?

2

Solution:

mymidia_bytes is a blob object stored in my sqlite database [sqlite.Bytes(my_audio_bytes)], loaded to a pandas dataframe (row.Audio).

To autoplay it in the streamlit app:

import base64

mymidia_placeholder = st.empty()

mymidia_str = "data:audio/ogg;base64,%s"%(base64.b64encode(mymidia_bytes).decode())
mymidia_html = """
                <audio autoplay class="stAudio">
                <source src="%s" type="audio/ogg">
                Your browser does not support the audio element.
                </audio>
            """%mymidia_str

mymidia_placeholder.empty()
time.sleep(1)
mymidia_placeholder.markdown(mymidia_html, unsafe_allow_html=True)
1 Like
3

Hi, I also want to play audio autoplay but, In this case, I need to take audio from a folder, and I’m not familiar with HTML can you provide a soln how to autoplay audio files from a folder?

1 Like
4

will this work for videos?

5

Hello,

I tried some of your code and noticed that the autoplay parameters seems to getting stripped from the code in the app, are you seeing the same type of issue. Running Streamlit 1.0.0, tried st.markdown and components.html(). No joy

6

This issue has been raised by others as well Autoplay option for audio files · Issue #2446 · streamlit/streamlit · GitHub. It’s discouraging to see how it hasn’t been addressed for more than a year.

7

Since the Audio component from IPython.display module can autoplay audio files, is there a way to incorporate it somehow in streamlit as a workaround until the proper solution for Autoplay option for audio files · Issue #2446 · streamlit/streamlit · GitHub is found?

8

FYI by default, autoplay is not allowed by browsers. One needs to add special permissions in Browser settings.

9

Here is how you do it with Video autoplay in streamlit:
Demo: Base64StreamlitAutoplayVideo - a Hugging Face Space by awacke1

import streamlit as st
import base64
import time

# Read the video file as bytes
with open("Walking on Bourbon Street.mp4", "rb") as file:
    video_bytes = file.read()

video_placeholder = st.empty()

# Encode the video bytes as base64
video_base64 = base64.b64encode(video_bytes).decode()

# Create the HTML video element
video_html = f"""
<video autoplay controls>
    <source src="data:video/mp4;base64,{video_base64}" type="video/mp4">
    Your browser does not support the video element.
</video>
"""

video_placeholder.empty()
time.sleep(1)
video_placeholder.markdown(video_html, unsafe_allow_html=True)
10

This works slightly better by caching the base64 video and html string output:
Base64StreamlitAutoplayVideo - a Hugging Face Space by awacke1

import streamlit as st
import base64
import time

@st.cache_resource
def Base64CacheIt(filename):
    # Read the video file as bytes
    with open(filename, "rb") as file:
        video_bytes = file.read()
    
    # Encode the video bytes as base64
    video_base64 = base64.b64encode(video_bytes).decode()
    
    # Create the HTML video element
    video_html = f"""
    <video autoplay controls width="100%">
        <source src="data:video/mp4;base64,{video_base64}" type="video/mp4">
        Your browser does not support the video element.
    </video>
    """
    
    return video_html

# Set page layout to wide screen
st.set_page_config(layout="wide")

video_placeholder = st.empty()
video_html = Base64CacheIt("Walking on Bourbon Street.mp4")

video_placeholder.empty()
time.sleep(1)
video_placeholder.markdown(video_html, unsafe_allow_html=True)

This will cache the resource after one run so subsequent transfers are quicker. It still lags for large files yet works well for wired connections. This also positions video with wide streamlit feature which works better. Cheers! --Aaron

Autoplay with loop works too - loads in about 15 seconds for 130MB video on 800Mbps internet.:

    <video autoplay loop controls width="100%">
11

Streamlit version 1.34.0 added autoplay support for st.video and st.audio. :tada:

1 Like