在 Python Flask 中单击按钮时音频不播放

Question

当我单击“删除”按钮时，我正在尝试播放音频。 我还编写了外部 JavaScript 文件并将其与 Flask 链接。

索引.html

<a href="/delete/{{todoitem.item_id}}" class="btn btn-danger" onclick="playDelSound()">Delete</a>

应用程序.js

function playDelSound() {
        var delSound = new Audio("/static/delete.mp3");
        delSound.play();
}

但是当我点击删除按钮时，声音没有播放。

Answer 1

当您单击链接时，Web 浏览器会重新加载页面，并从内存中删除应该播放声音的代码。

你必须抓住链接

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

播放声音并在声音后重定向/重新加载页面。

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

最少的工作代码

from flask import Flask, render_template_string

app = Flask(__name__)

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

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

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

app.run()