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
2

Hey @jh_st,

Thanks for sharing your question! It sounds like you may have skipped some of the steps of creating a component. The URL that’s passed to the declare_component method should be the address of the server where you’re hosting your component – it seems like in this case that URL might be the JS for WaveSurfer.

Check out our guide on building bidirectional components here. We also have TypeScript and React templates here.

Also worth noting that this forum post covers the simplest possible HTML component – you might be able to go with that route for this.