Search on blog:

Flask: play sound after click link but before reload page

When you click link then web browser reloads page and it removes from memory code which should play sound.

You would have to catch link

<a href="javascript:void(0);" onclick="sound('{{item}}')">JAVASCRIPT LINK</a>

play sound and redirect/reload page after sound.

function sound(item) {
    var audio = new Audio('/static/audio_file.mp3');
    audio.onended = function() { window.location.href="/delete/" + item; }
    audio.play();
}

Minimal working example

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
<a href="/delete/{{item}}" onclick="sound()">NORMAL LINK</a><br>

<a href="javascript:void(0);" onclick="sound('{{item}}')">JAVASCRIPT LINK</a>

<script>
function sound(item) {
    //alert("SOUND");
    // create audio 
    var audio = new Audio('/static/audio_file.mp3');
    // reload after audio 
    audio.onended = function() { window.location.href="/delete/" + item; }
    //audio.onended = function() { window.location.reload(); }
    // play audio
    audio.play();
}
</script>
''', item="SomeValue")

app.run() #debug=True 
If you like it
Buy a Coffee