Triggering audio hover effects in plotly

user_3407343 0
Viewed 1602

I recently discovered plotly and I think it's a great tool to share interactive plots over the internet. Since my research is in audio signal processing, I'd like to use it to convert my matlab/python plots into interactive plots allowing the user to play the different audio signals used to generate the plot.

For instance, if a bar plot shows a bunch of bars corresponding to as many different speech enhancement strategies, I'd like to find a way to play the different audio signals when hovering on the different lines.

I found this example (or here, to open it with codePen) to add custom hover effects to a plotly plot; specifically, the example deals with showing an image when hovering over a bar of the plot. I'd like to have something similar, but triggering an audio playback instead of an image visualization.

How could the code be edited to do this? (e.g. to play a given sound when hovering over one of the bars)

plotly matlab python
1 Answers

I see following approaches which can work for such visualization:

  1. There is an ability to build own components with dash. Here is a tutorial: react-for-python-developers and cookiecutter generator. As an example here you can find a component with wrapped react-sound: dash_audio_components. It can be installed and used in "dash"-generated web interface for plotly by the following way: import dash import dash_audio_components import dash_core_components app = dash.Dash('app-name') ...Set serving locally because this component isn't placed to cdn app.scripts.config.serve_locally = True app.layout = html.Div( children=[ dcc.Graph( id='chart-id', figure=<FigureObj> ), dash_audio_components.DashAudioComponents( id='audio-player', url=None, playStatus='STOPPED' ) ] ) @app.callback(dash.dependencies.Output('audio-player', 'playStatus'), [dash.dependencies.Input('chart-id', 'clickData')]) def set_status(click_data): ...Preserve somewhere status of audio-player and return changed state ...hover or unhover events can be handled as well @app.callback(dash.dependencies.Output('audio-player', 'url'), [dash.dependencies.Input('chart-id', 'clickData')]) def set_status(click_data): ...Return url from textual information received from click_data

This article describes good practices of sharing some state: Sharing data between callbacks

  1. Another way which can be more applicable for those who experienced with web development is implementing a separate SPA with react-plotly and passing data to it from service endpoints, here is how you can bind sounds to existing "plotly" click event binding to click events, it can be done on componentDidMount method call or in JSX as callback with "plotly_click" or "plotly_hover" property. There are plenties of React components to play audios. Application blueprint can be generated by 'yeoman' as well for simplicity sake. Codepen example with plotly.js library to handle 'clicks' and 'unhover' events and play sound: codepen plotly
user_25044770
Related