Dash html.Audio Component completely refreshes the App after loading the .mp3 src

Dash Python
1

Dear,

I have added an html.Audio component to my App as follows:

html.Div([html.Div([html.Div(id='audio-message', className= "six columns")], className="row"),

…

@app.callback([Output(‘output-display’, ‘children’),
Output(‘audio-message’, ‘children’)],

…

text = ‘testing test test one two three’

    myobj = gTTS(text=text, lang='en', slow=False)
    if 'test.mp3' in os.listdir(os.path.join(dirpath, 'assets')):
        os.remove(os.path.join(dirpath, 'assets', 'test.mp3'))
    myobj.save("assets/test.mp3")
    audio = html.Audio(id='audio', src='assets/test.mp3', controls=True, autoPlay=True)

    return message, audio

Now the strange thing that happens is that the audio file gets saved in the assets folder. And (depending on how fast the PC is), it will after it is being loaded, be spoken by a voice, but only for a tiny moment, after which the complete App restores/refreshes. Then I have lost all my data and calculations and the complete .mp3 file has not even been completely spoken. Unfortunately, I am unable to find the problem… hope you guys may know what is going on here.

Please let me know if more information is required.

Kind regards.

2

My guess is that the app reloads because of “code reloading” & “hot reloading”: a new file is detected in assets/ which causes the development app to refresh. You can turn this behavior off, see http://dash.plotly.com/devtools

3

Hi @chriddyp, according to the documentation, the problem should be in ‘hot reloading’ as it has a reference to the ‘assets’ folder. However, if I set dev_tools_hot_reload=False , the problem is gone, I have no refreshing, but even though I have deleted the old .mp3 file and created a new .mp3 file, it does not get loaded anymore: it will play the older file for some reason. Is there any other way to solve this?