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

🎈 Using Streamlit
1

Summary

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

MyCode:

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

# Create Wavesurfer.js component
wavesurfer_component = components.declare_component(
    "wavesurfer",
    url="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.4/wavesurfer.min.js",
)

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

    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.

error
error820×649 31.3 KB

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