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

Hello @andfanilo @asehmi

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

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.

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

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