How do I play audio using an external JavaScript library? And why isn't it working?


I wrote the code properly to create an audio player using an external JavaScript library(wavesurfer.js), but it’s not working. Why could this be happening?

Steps to reproduce


import streamlit as st
import streamlit.components.v1 as components

# Create Wavesurfer.js component
wavesurfer_component = components.declare_component(

# Audio Player using by Wavesurfer.js
def wavesurfer(audio_file):
    audio_data =

    audio_player = wavesurfer_component(audio_data=audio_data, key="wavesurfer")

    return audio_player

# Streamlit page implement
st.title("Wavesurfer.js audio player")
audio_file = st.file_uploader("Choose an audio file")

if audio_file:
    audio_player = wavesurfer(audio_file)
    st.components.v1.html(audio_player, height=200)

I created a basic code as shown above by referring to streamlit components docs, but I am getting the following error.

I am trying to use a waveform audio player with interactive features using wavesurfer.js.
How can I fix it?

Debug info

  • Streamlit version: 1.20.0
  • Python version: 3.9.13
  • Using Conda
  • OS version: Ubuntu LTS
  • Browser version: latest Chrome