How to show audio player when point on interactive plot is clicked?

[ssakhavi]

Hi!

I’m trying to implement the above diagram in Streamlit. Each point on the graph represents an audio file and I would like to hear each audio file in order to do EDA.

Any suggestions regarding how I can do this?

[Marisa_Smith]

Hi @ssakhavi,

This is not possible natively in Streamlit, but we have a couple of community members that made components that can (I believe):

by @Bright:

St_echarts_events, a new method to get the echarts-chart return value from the front-end event

Hi, I just made a component that can easily access the echarts chart , receive the value returned from the front-end event., such as the x-axis and y-axis values returned in the click event. [Video_2021-12-06_163114] Source code in github Here is the doc. Streamlit Echarts Events a bi-directional streamlit components with pyecharts plots return event value from js-side to python-side。if no events designed, just display a chart. Installation pip install streamlit-ehcarts-events Usa…

and another for vega, vega-light and Altair:

GitHub - domoritz/streamlit-vega-lite: A Streamlit component to render...

Edit

Looks like I missed a couple of components that do this for other libraries: (thanks to @andfanilo for pointing them out to me)

@ash2shukla’s Brokeh:

Component for bi-directional communication with bokeh

I was working on a ML project with streamlit and I absolutely love it ! But one major drawback I found was that there’s literally no possible way/workaround to have bi-directional communication with bokeh graphs. It becomes really a bottleneck when you are dealing with geo-data and you want the user to draw a polygon or something and process the selected data. I came across this issue last night and have managed to put together a component that does just that, its far from optimal solution and j…

@null-jones plotly one:

Bi-directional Plotly Component

Hey folks! I needed plot interactivity for a project, so I’ve put together a simple component that sends Plotly events back to Streamlit! Obviously this repo is pretty early-on, but I thought I’d make a post about it. Currently you can configure the component to send back click, select, and hover events for plotly. Some of the features I hope to implement are: Automatic layer generation to change the cursor to a pointer (to help indicate it’s clickable) (https://codepen.io/destrada/pen/p…

@andfanilo’s echarts one does this as well:

Streamlit-echarts

Hello all ! EDIT : source repo https://github.com/andfanilo/streamlit-echarts Are there people familiar with echarts here ? I’m not very familiar with echarts myself and documentation can be daunting sometimes…so I’d like you to test the streamlit-echarts package. [demo] # you need to be in an environment with Streamlit custom components pip install streamlit-echarts streamlit run app.py with some sample files in the examples folder of the project https://github.com/andfanilo/streamlit-ech…

Catch mouse events on ECharts plots in Streamlit | Introducing streamlit-echarts 0.4.0

Happy Streamlit-ing!
Marisa

[ssakhavi]

Thanks @Marisa_Smith. I appreciate the responses.

I didn’t know what I was looking. Now I know that it’s related to “Events” and “Bi-directional Components”.

Thank you