Audio plays only the first time the callback is called

[banyous]

When I call the html.Audio via a callback trigger, it plays for the first time. If I repeat the same trigger on the same page, it doesn't work, any idea? The trigger event is button click (id=submit_query).

def play_audio_alert():
    return html.Audio(autoPlay=True, src= '/assets/query_sound.wav')

@app.callback(      [
                        Output(component_id='sound_notification', component_property='children'),
                ],
                [
                Input('submit_query',  'n_clicks')
                ],
def user_query(button_n_click):
     if button_n_click!= None and button_n_click >0 :
                       return play_audio_alert()

app.layout = html.Div([ dcc.Location(id='url', refresh=False),
                        html.Div(id='page-content'),
                        html.Div(id='sound_notification')
                    ])

[volerog]

HI, we faced the same issue. Dash renews only fields in audio tag, but browser need to re-build the whole element to re-render it. So currently nothing changes on callbacks and we can't use pager to navigate through audios.

import os
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__, assets_folder=os.path.join(os.path.dirname(__file__), 'assets'))

audio1 = html.Div(children=[
    html.Audio(html.Source(src=f"https://file-examples-com.github.io/uploads/2017/11/file_example_WAV_1MG.wav",
                           type="audio/wav"), controls=True, preload='auto')
])

audio2 = html.Div(children=[
    html.Audio(html.Source(src=f"https://file-examples-com.github.io/uploads/2017/11/file_example_WAV_2MG.wav",
                           type="audio/wav"), controls=True, preload='auto')
])

app.layout = html.Div(
    children=[
        html.Div(id="div-audio", children=['DUMB']),
        html.Button(id="btn-audio", style={'width': '100px', 'height': "50px"})
    ]
)

@app.callback(
    Output('div-audio', 'children'),
    [Input('btn-audio', 'n_clicks')],
)
def page_1_dropdown_period(n_clicks):
    flag = (n_clicks or 0) % 2
    return [flag, audio1 if flag else audio2]

if __name__ == '__main__':
    app.run_server(port=9999, host="0.0.0.0")