Запуск звуковых эффектов при наведении

Question

Я недавно обнаружил plotly, и я думаю, что это отличный инструмент для обмена интерактивными сюжетами через Интернет. Поскольку мои исследования касаются обработки аудиосигналов, я хотел бы использовать ее для преобразования графиков matlab / python в интерактивные графики, позволяющие пользователю воспроизводить различные аудиосигналы, используемые для создания графика.

Например, если гистограмма показывает группу столбцов, соответствующих как можно большему количеству различных стратегий улучшения речи, я хотел бы найти способ воспроизведения различных аудиосигналов при наведении на разные линии.

Я нашел этот пример (или здесь , чтобы открыть его с помощью codePen), чтобы добавить пользовательские эффекты при наведении на график plotly; в частности, пример касается показа изображения при наведении курсора на полосу графика. Я хотел бы иметь что-то похожее, но запускать воспроизведение звука вместо визуализации изображения.

Как можно отредактировать код для этого? (например, для воспроизведения данного звука при наведении курсора на одну из полос)

Answer 1

Я вижу следующие подходы, которые могут работать для такой визуализации:

1. Существует возможность создавать собственные компоненты с тире .Вот учебное пособие: реакция-для-python-разработчиков и генератор печенья .В качестве примера здесь вы можете найти компонент с обернутым Reaction-sound : dash_audio_components .Он может быть установлен и использован в «dash» -генерированном веб-интерфейсе для plotly следующим образом: 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

В этой статье описываются передовые методы совместного использования некоторого состояния: Обмен данными между обратными вызовами

Еще один способ, который может быть более применим для тех, кто сталкивался с веб-разработкой, - это внедрение отдельного SPA с response-plotly и передача ему данных с конечных точек службы. Вот как вы можете привязать звуки к существующим«plotly» событие клика привязка к событиям клика , это можно сделать при вызове метода componentDidMount или в JSX как обратный вызов со свойством plotly_click или plotly_hover.Есть множество компонентов React для воспроизведения аудио.Для простоты также можно сгенерировать план приложения.Пример Codepen с библиотекой plotly.js для обработки событий click и unhover и воспроизведения звука: codepen plotly