Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Can't get html.Audio to work

So, i have written the simplest possible dash-Application to try out the uses of html.Audio and html.Video respectively, but can’t seem to get either of them to work. My code (contained in a file dash_asdf.py) looks as follows:

import dash
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

        Dash: A web application framework for Python.

    html.Audio(src='/47178__moca__saxu.mp3', controls=True),

if __name__ == '__main__':

with the file 47178__moca__saxu.mp3 laying in the same directory as the script itself. I can see the controls of the audio-element but the sound doesn’t load!

Have i maybe gotten something about the src-attribute wrong?

Thanks in advance!


by default for security reasons files aren’t served from the root directory. try placing the file in the assets folder and updating the path to be ‘/assets/…’

Hi Chris!

Thank you, that’s good to know. Hosting the file in the assets folder worked. Is this information stored in the Docs somewhere?

Thanks again for the fast response! :slight_smile:

@chriddyp followup-question: I have seen this issue, which is relatively old. Some folks, that i work on an application with used the base64-approach. However, as i understand it, the encoding and inclusion of base64 is not required anymore and therefor cumbersome to write and wastes CPU-cycles, when i compare it to the approach of simply including media in the assets-folder.

Am i right with this assumption?

Is the assets-folder the only way to include media without base64 or can i also use another folder that i can reference with a relative or absolute path?