Can't get html.Audio to work

Dash Python
1

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

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

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

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

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!

2 Likes
2

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/…’

3

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:

4

@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?