Audio Component not loading

Dash Python
1

Hello,

I am trying to embed an audio file (.wav) in my dash app. Unfortunately the app does not display anything.

What I am currently doing is using a python server (http.server) and getting the file from it.

    audio_filename = 'http://localhost:9999/file.wav'
    app.layout =html.Div([html.Audio(id='audio', src=audio_filename)])

But when I use html.Img with an png file it perfectly works.

    img_filename = 'http://localhost:9999/file.png'
    app.layout =html.Div([html.Img(id='img', src=img_filename)])

I searched around and I didn’t find much on the html.Audio component and I don’t know how to proceed right now.
Thanks in advance for your help guys!

2

Looking at the audio docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio), it looks like you might need something like controls=True too

3

Yes! That has done the trick! Thank you!

1 Like
4

Does anyone know if there’s a way to remove the download button from this component? I don’t see an option to use controlsList="nodownload" as suggested here

Thanks!

5

No there is no straight forward way to do that.

Even on dash html component page also (https://github.com/plotly/dash-html-components/blob/master/dash_html_components/Video.py) there is no mention of “controlsList” being implemented.

one work around is to use “dash_dangerously_set_inner_html”

below is my implementation of it. Hope this helps you

app.layout = html.Div([
         dash_dangerously_set_inner_html.DangerouslySetInnerHTML('''<video width="600" 
         height="350" src = '/assets/videoplayback.mp4' controls controlsList="nodownload">
         </video>''')
])
1 Like