Linking Scatter plot elements to Audio Files

Dash Python
1

Hi,

I recently started using plotly in python and I want to build a dashboard where when I click on an element of scatter plot, It plays an audio file.
The feature is similar to the one seen here.

http://doc.gold.ac.uk/~lfedd001/three/demo.html

Is this feasible right now in dash or in python with Plotly.

Thanks,

3 Likes
2

Hi,

Any luck? I’d like to do exactly the same thing.

3

I also want to learn how to do the exact same thing in dash.

4

Nope,

I did not succeed in doing it.

5

I finally managed to do it with wav files pre-uploaded to amazon s3, and callback on hover which returns html.Audio(src='url/amazon/s3/bucket/%s.wav' % hover_data_index, controls=False, autoplay=True)

1 Like
6

Hi jlsg,

Posted a while back, but I was wondering which attribute did you target on the Output of your callback to trigger the sounds?
I can embed the sound into my current dash application but I have not found a way to trigger “play” from a callback, I can only do it from the control.

Thanks for sharing.

7

ok, answering my own question…
Not sure if it belongs here, but such an example would have save me a fair bit of time.

Note:

  • I am using a base64 encoding to pass the audio file

Limitation:

  • Play only once (Only work for the first click)
  • sound file seems truncated at the start of the audio (few second for me) so need to have an audiofile long enough (mine is 8 sec)
import dash
import dash_html_components as html
import base64
from dash.dependencies import Input, Output


app = dash.Dash(__name__) 


# Encode the local sound file.
sound_filename = 'path_to_your_file.mp3'  # replace with your own .mp3 file
encoded_sound = base64.b64encode(open(sound_filename, 'rb').read())


app.layout = html.Div(children=[
    html.H1(children='Demo for Audio with Dash'),

    html.Div(children='''
        Click the button to play your local .mp3 sounds.
    '''),


    html.Button(id="button1", children="Click me for sound"),
    html.Div(id="placeholder", style={"display": "none"})])


@app.callback(Output("placeholder", "children"),
              [Input("button1", "n_clicks")],
              )
def play(n_clicks):
    if n_clicks is None:
        n_clicks = 0
    if n_clicks != 0:
        return html.Audio(src='data:audio/mpeg;base64,{}'.format(encoded_sound.decode()),
                          controls=False,
                          autoPlay=True,
                          )


if __name__ == '__main__':
    app.run_server(debug=True)
8

please team could you help here, how to embedd & trigger audio files from clientside

9

Put audio in assets folder and refer to them as ‘assets/my.mp3’