情节触发音频悬停效果

时间:2018-11-12 15:26:02

标签: python matlab plotly

我最近发现了plotly,我认为这是在互联网上共享交互式地块的绝佳工具。由于我的研究是音频信号处理,因此我想用它将我的matlab / python图转换为交互式图,从而允许用户播放用于生成图的不同音频信号。

例如,如果一个条形图显示了一堆与许多不同的语音增强策略相对应的条形,那么我想找到一种在悬停在不同行上时播放不同音频信号的方法。

我发现this example(或here,可以使用codePen打开)将自定义悬停效果添加到plotly图中;具体来说,该示例处理将鼠标悬停在图的条形上方时显示图像的问题。我想要类似的东西,但是触发音频播放而不是图像可视化。

如何对代码进行编辑? (例如,将鼠标悬停在其中一个小节上时播放given sound

1 个答案:

答案 0 :(得分:2)

我看到以下可用于此类可视化的方法:

  1. 可以使用破折号构建自己的组件。这是一个教程:react-for-python-developerscookiecutter generator。作为示例,您可以在其中找到带有react-sound包装的组件:dash_audio_components。 可以通过以下方式在“ plotly ”生成的“破折号”生成的Web界面中安装和使用它: 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

本文介绍了共享某些状态的良好做法:Sharing data between callbacks

  1. 另一种可能更适合那些 具有Web开发经验的人正在使用react-plotly实现一个单独的SPA,并从服务端点向其传递数据,这是将声音绑定到现有“轻声”点击事件binding to click events的方法,可以在componentDidMount上完成方法调用或在JSX中作为带有“ plotly_click”或“ plotly_hover”属性的回调。有很多React组件可以播放音频。为了简单起见,应用程序蓝图也可以由“ yeoman”生成。带plotly.js库的Codepen示例,用于处理“点击”和“悬停”事件并播放声音:codepen plotly