How can I use an external Video/Audio JS library like Wavesurfer.js to render and interact with my streamlit app?

🧩 Custom Components
,
1

Hello @andfanilo @asehmi

How can I use an external Video/Audio JS library like Wavesurfer.js to render and interact with my streamlit app?

1 Like
2

The key part of your question is “make it interact with Streamlit”. For that you’ll need to use Streamlit components. I suggest you first look at this post which is the simplest possible static HTML component into which you can add the Wavesurfer.js script: Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc).

If that doesn’t work, then the React or React-less component implementation tutorials should show you more advanced schemes to make it work.

3

hello can you share me the github link for your project(Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc)) and any code snippet for using the streamlit component for bi-directional communication with wavesurfer.js

4

@mlnewbie987 The code is not mine. Just create the files as shown in the post in those directories.

./mycomponent/index.html
./mycomponent/__init__.py
./app.py

Insert your script above the script in index.html.

Then run: streamlit run app.py from the root folder.