`audio` elements with the same auto-generated ID

Using Streamlit
1

StreamlitDuplicateElementId: There are multiple audio elements with the same

auto-generated ID. When this element is created, it is assigned an internal ID based on

the element type and provided parameters. Multiple elements with the same type and

parameters will cause this error.

To fix this error, please pass a unique key argument to the audio element.

but TypeError: audio() got an unexpected keyword argument ‘key’

temp_audio_path = f"voices_hands/temp_{timestamp}.wav"

# Copy the original audio file

shutil.copyfile(audio_path, temp_audio_path)

audio_bytes = open(audio_path, ‘rb’).read()
with audio_container:

Play the audio

st.audio(audio_bytes, format=“audio/wav”, autoplay=True)

print(f"Audio playback bytes: {audio_bytes}")

time.sleep(5) # Assume the audio length is 2 seconds, wait for audio to finish playing

I tried to use the current time to randomly generate a filename each time to avoid generating the same auto-generated ID, but it didn’t work.

how to do

2

I am unable to reproduce the issue.

3

Do you have an example simple script that reproduces this? If so, what version of streamlit are you using?

4

The version I am using is 1.45.0.I checked the official documentation, in this version and even in earlier versions,there is no key in the parameters of st.audio.

5

Similar to the usage of key in st.button:st.audio(f"voices_hands/{class_name_ti10}.wav", autoplay=True,key = str(time.time()))
I try to use the current time as the only value for the key.
I want to play the wav language file generated by the model for a gesture when it is recognized in real-time, but when a certain gesture is recognized a second time, it triggers ‘StreamlitDuplicateElementId: There are multiple audio elements with the same auto-generated ID’.

6

class_name_ti10 = class_name
audio_container = st.container() # Create a container to display the audio
audio_path = f"voices_hands/{class_name_ti10}.wav"

# Generate a unique temporary filename

timestamp = datetime.now().strftime(“%Y%m%d%H%M%S%f”)

temp_audio_path = f"voices_hands/temp_{timestamp}.wav"

# Copy the original audio file

shutil.copyfile(audio_path, temp_audio_path)

audio_bytes = open(audio_path, ‘rb’).read()
with audio_container:
# Play the audio
st.audio(audio_bytes, format=“audio/wav”, autoplay=True)

print(f"Audio playback bytes: {audio_bytes}")

time.sleep(5) # Assume the audio length is 2 seconds, wait for audio to finish playing

I tried to use the current time to randomly generate a filename each time to avoid generating the same auto-generated ID, but it didn’t work.

7

Looking forward to your reply.Thank you very much

8

Similar to the usage of key in st.button:st.audio(f"voices_hands/{class_name_ti10}.wav", autoplay=True,key = str(time.time()))
I try to use the current time as the only value for the key.
I want to play the wav language file generated by the model for a gesture when it is recognized in real-time, but when a certain gesture is recognized a second time, it triggers ‘StreamlitDuplicateElementId: There are multiple audio elements with the same auto-generated ID’.

9

I modified the original post hoping it will be helpful.
Looking forward to your reply.Thank you very much

10

Can you please format your code as a code block? You can do this by putting a line with ``` above and below your code.

11

Unfortunately, I can’t figure out any solution that works with autoplay=True. If you set sample_rate=, that removes the error, but raises a warning about that parameter being invalid, and causes the autoplay to not work.

If you can remove the autoplay, that seems to fix it.

I’ve reported this as a bug here Multiple `st.audio` calls with same parameters and autoplay=True raises DuplicateWidget error, prompts you to add a key, but you can't add a key · Issue #11360 · streamlit/streamlit · GitHub, because at the very least the error message is misleading.

12

I have the same error in 1.46 with the code below:

    st.audio(
        data=open(f"{audio_dir}{audio_name}{audio_file_suffix}", "rb").read(),
        format='audio/mp3',
        autoplay=True,
        # key=str(time.time())
    )

Error:
There are multiple audio elements with the same auto-generated ID. When this element is created, it is assigned an internal ID based on the element type and provided parameters. Multiple elements with the same type and parameters will cause this error.

To fix this error, please pass a unique key argument to the audio element.

But when I uncomment the # key=str(time.time()) got a different error:

MediaMixin.audio() got an unexpected keyword argument ‘key’

My temp solution is to use markdown:

    audio_html =  f"""
                <audio autoplay="true">
                    <source src="data:audio/mp3;base64,{audios.get(audio_name, 'unknown_audio')}" type="audio/mp3">
                </audio>
                """
                

    # Inject HTML
    st.markdown(audio_html, unsafe_allow_html=True)

but audio playing is hit or miss, not consistent

13

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.