Python 在plotly中触发音频悬停效果

我最近发现了plotly，我认为它是一个在互联网上共享交互式绘图的好工具。因为我的研究是音频信号处理，所以我想用它将我的matlab/python绘图转换为交互式绘图，允许用户播放用于生成绘图的不同音频信号

例如，如果一个条形图显示了一组对应于许多不同语音增强策略的条形图，我想找到一种方法，在不同的线路上悬停时播放不同的音频信号

我发现（或者，用codePen打开它）可以将自定义悬停效果添加到

plotly

plot；具体地说，本示例处理将鼠标悬停在绘图条上时显示图像的问题。我希望有类似的东西，但触发音频播放，而不是图像可视化

---

如何编辑代码来实现这一点？（例如，将鼠标悬停在其中一个条上时播放a）

我看到以下方法可以实现这种可视化：

可以使用破折号构建自己的组件。这里有一个教程：和。例如，您可以找到包装为的组件：。 它可以通过以下方式安装并在“短跑”生成的网页界面中使用：

导入破折号
导入仪表板\u音频\u组件
导入dash_核心组件
app=dash.dash（'app-name'）
…设置本地服务，因为此组件未放置到cdn
app.scripts.config.service_locally=True
app.layout=html.Div(
孩子们=[
图(
id='chart-id'，
身材=
),
仪表盘音频组件。仪表盘音频组件(
id='audio-player'，
url=无，
播放状态为“已停止”
)
]
)
@应用程序回调（dash.dependencies.Output（'audio-player'、'playStatus'），
[dash.dependencies.Input（'chart-id'，'clickData'））
def设置_状态（单击_数据）：
…保留音频播放器的状态并返回更改的状态
…也可以处理悬停或取消悬停事件
@app.callback（dash.dependencies.Output（'audio-player'，'url'），
[dash.dependencies.Input（'chart-id'，'clickData'））
def设置_状态（单击_数据）：
…从点击数据接收的文本信息返回url

本文介绍了共享某些状态的良好实践：

另一种更适用于那些 经验丰富的web开发人员正在使用服务端点实现一个单独的SPA并将数据传递给它，下面介绍如何将声音绑定到现有的“plotly”单击事件，可以在componentDidMount方法调用上进行绑定，也可以在JSX中使用“plotly_click”或“plotly_hover”属性作为回调进行绑定。有足够的React组件来播放音频。为了简单起见，“yeoman”也可以生成应用程序蓝图。使用plotly.js库处理“点击”和“取消覆盖”事件并播放声音的代码笔示例：

---

运气好吗？我也面临同样的问题。我意识到要正确理解它需要花费太多的时间，所以，就目前而言，我把它放在一边：/哇！我想这条线已经忘了：）谢谢你的帮助。我会看一看，看看我是否能（或我能）应用你的建议；）Cheers@gbernardi不客气，我可以补充澄清，如果有任何需要。嗨，音频组件看起来很有希望。但在我看来，输入必须是mp3或wav的url。我想知道是否有解决方法，因为我正在使用numpy数组，将鼠标悬停在散点图上的数据上会索引数组的相应行，然后将其转换为audio playback.Hi。我只知道两种方法，在浏览器中，它可以转换为音频元素，然后播放，或者可以缓冲/存储为blob并播放。我相信Blob格式可以作为src字符串传递给dash组件。作为散点图的解决方法，您可以使用阵列和预先转换的wav记录。通过另一种方式，您可以使用blob格式保留音频缓冲区数据，并在不使用仪表板组件的情况下播放它，以下是一个教程：