javascript - 在 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();
}
但是当我单击删除按钮时,声音没有播放。
解决方案
当您单击链接时,网络浏览器会重新加载页面并从内存代码中删除应该播放声音的代码。
你必须抓住链接
<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()
推荐阅读
- mongodb - 如何通过 terraform 明确的依赖关系来正确地获得部署顺序
- python - QGraphicsTextItem 没有更新分数
- c++ - 为什么使用模板结构作为基类而不是常规类/接口?
- makefile - 对于单平台项目,cmake 比 make 有什么好处
- google-codelab - Flutter 提供的链接点击时出现以下 404 错误
- reactjs - TypeError:无法读取未定义的属性“地图”,尝试从 mongodb 读取
- spring-boot - Logback 滚动策略不会删除比最大历史记录更早的文件
- powerbi - power bi:如何在矩阵中垂直旋转列名
- oboe - 除了设置 setSampleRateConversionQuality 之外还有什么会导致 Oboe 修改采样率。
- xamarin.forms - xamarin.forms 本地化从不选择正确的语言