如何在Flask应用中播放用户上传的WAV格式音频文件

后端逻辑调整 #

你当前的问题是audio标签的src错误指向了返回上传页面的路由，需要先补充音频文件访问、上传结果回传的逻辑：

1. 基础配置
   首先配置上传文件存储目录，添加格式校验逻辑：

import os
from flask import Flask, render_template, request, send_from_directory

app = Flask(__name__)
# 自行创建该存储目录，确保程序有读写权限
app.config['UPLOAD_FOLDER'] = os.path.join(app.root_path, 'static', 'uploads')
ALLOWED_EXTENSIONS = {'wav'}

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

2. 上传&音频路由补充
   在你已有的上传逻辑基础上，上传成功后将音频文件名回传给前端，同时新增音频文件服务路由：

# 你已有的上传路由调整示例
@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files.get('file')
        if not file or file.filename == '':
            return render_template('index.html', error="请选择WAV文件上传")
        if allowed_file(file.filename):
            # 可自行添加uuid前缀避免重名覆盖
            save_name = file.filename
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], save_name))
            # 回传文件名给前端用于播放
            return render_template('index.html', audio_name=save_name)
    return render_template('index.html')

# 新增音频文件访问路由
@app.route('/get_audio/<filename>')
def get_audio(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

前端页面调整 #

替换你原有错误的audio标签，添加上传表单和条件显示的播放组件：

<!-- 上传表单 -->
<form method="POST" enctype="multipart/form-data" action="{{ url_for('upload_file') }}">
    <input type="file" name="file" accept=".wav" required>
    <button type="submit">上传音频</button>
    {% if error %}
    <p style="color: #ff4444;margin: 8px 0;">{{ error }}</p>
    {% endif %}
</form>

<!-- 音频播放组件，仅上传成功后展示 -->
{% if audio_name %}
<audio controls preload="auto" style="margin-top: 16px;">
    <source src="{{ url_for('get_audio', filename=audio_name) }}" type="audio/wav">
    您的浏览器不支持音频播放功能
</audio>
{% endif %}

如果不想单独写音频路由，也可以直接把source的src替换为静态目录地址：

<source src="{{ url_for('static', filename='uploads/' + audio_name) }}" type="audio/wav">

注意事项 #

• 提前创建static/uploads目录，避免文件保存失败
• 生产环境建议给存储的文件名加随机前缀，避免不同用户上传同名文件覆盖
• 可通过app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024配置限制上传文件最大大小，示例为16MB

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