Flask项目MP3文件路径错误排查及音频播放问题求助

问题根源 #

Flask默认仅从static目录提供静态资源（音频、图片、CSS等），你将output.mp3放在项目根目录，前端请求/output.mp3时Flask无法识别该路径，导致无法访问。

方法1：使用Flask默认静态文件目录（推荐） #

这是符合Flask规范的标准做法：

1. 调整目录结构
   在项目根目录创建static文件夹，修改synthesize_text_file函数，将output.mp3生成到static目录下，最终结构如下：

Root
-- static
   -- output.mp3
-- Templates
   -- index.html
-- Flask python（你的Flask主文件）
-- CSS

2. 修改HTML音频路径
   更新<audio>标签的src属性，指向静态文件目录：

<audio id="player" src="/static/output.mp3" type="audio/mpeg"></audio>

3. 修正音频生成路径
   在synthesize_text_file函数中指定正确的输出路径，示例代码：

import os
from flask import Flask

app = Flask(__name__)

def synthesize_text_file(text):
    # 生成音频到static目录
    output_path = os.path.join(app.root_path, 'static', 'output.mp3')
    # 这里写你的音频生成逻辑，保存到output_path

方法2：手动添加路由返回音频文件 #

如果不想调整文件位置，可以在Flask代码中添加路由，直接返回根目录的output.mp3：

from flask import send_from_directory
import os

app = Flask(__name__)

# 新增路由
@app.route('/output.mp3')
def serve_audio():
    return send_from_directory(app.root_path, 'output.mp3', mimetype='audio/mpeg')

# 原有的路由代码
@app.route("/")
def home():
    return render_template("index.html")

@app.route("/submit", methods = ["POST", "GET"])
def input():
    if request.method == "POST":
        text = request.form["nm"]
        synthesize_text_file(text)
        return render_template("index.html")
    else:
        return render_template("index.html")

这种方式无需修改HTML的src路径，但不符合Flask静态资源管理的规范，仅适合临时场景。

注意事项 #

每次生成新的output.mp3后，浏览器可能会缓存旧文件，可通过添加版本参数解决，比如：

<audio id="player" src="/static/output.mp3?v={{ timestamp }}" type="audio/mpeg"></audio>

在Flask返回模板时传入当前时间戳，确保每次加载最新文件。

内容的提问来源于stack exchange，提问作者ShinyZack123