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.
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