首页 > 解决方案 > 在 Python Flask 中单击按钮时不播放音频

问题描述

当我单击删除按钮时,我正在尝试播放音频。我还编写了外部 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();
}

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

标签: javascriptpythonflask

解决方案


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

你必须抓住链接

<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()

推荐阅读