Linking Scatter plot elements to Audio Files


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.

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




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

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


I did not succeed in doing it.

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

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.

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


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


  • 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'),

        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()),

if __name__ == '__main__':

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