在 Flask 应用中，我们经常需要在服务器端动态生成内容，并将其展示在客户端。本文将探讨一种有效的方法，即利用 Flask 的路由机制和 HTML5 的
问题背景
最初的尝试是在 Flask 应用中使用 app.post 方法，希望将服务器端生成的音频数据直接发送到客户端。然而，这种方法会导致 AssertionError 错误，提示在应用处理第一个请求后，不能再调用 post 方法进行配置。
解决方案
正确的做法是修改服务器端的路由配置，将音频生成逻辑放在一个独立的路由中，然后使用 HTML5 的
1. 修改服务器端代码
将原有的 paadas 函数拆分为两个路由：
- /：用于渲染 index.html 模板，保持页面焦点。
- /paadas：用于生成音频数据并返回，mimetype 设置为 audio/wav。
from flask import Flask, render_template, Response, url_for
import random
import time
import wave
import io
import os
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
@app.route('/paadas')
def paadas():
def generate(files):
with wave.open(files[0], 'rb') as f:
params = f.getparams()
frames = f.readframes(f.getnframes())
for file in files[1:]:
with wave.open(file, 'rb') as f:
frames += f.readframes(f.getnframes())
buffer = io.BytesIO()
with wave.open(buffer, 'wb') as f:
f.setparams(params)
f.writeframes(frames)
buffer.seek(0)
return buffer.read()
files = []
number = random.randint(1,10)
files.append("./numbers/" + str(number) + ".wav")
times = random.randint(1,10)
files.append("./times/" + str(times) + ".wav")
return Response(generate(files), mimetype='audio/wav')
if __name__ == '__main__':
app.run(debug=True)2. 修改客户端代码 (index.html)
在 index.html 文件中，添加
Flask Audio Example
Dynamic Audio Playback
3. 解释
- url_for('paadas')：在 Flask 模板引擎中，url_for 函数用于生成指定路由的 URL。
：指定音频源的 URL 和类型。
注意事项
- 确保 /paadas 路由返回的音频数据格式正确，mimetype 设置为 audio/wav。
- autoplay 属性的行为可能受到浏览器策略的限制，某些浏览器可能需要用户交互才能自动播放音频。
- 可以根据需要调整音频生成逻辑，例如添加参数、处理错误等。
总结
通过将音频生成逻辑放在服务器端的独立路由中，并使用 HTML5 的
