Flask+JavaScript下载MP3转MP4且音质劣化问题求助

问题描述 #

现有Flask后端（后续将动态生成MP3，当前仅实现路由功能），前端点击下载按钮后文件可成功下载，但出现两个异常：文件被识别为MP4格式，且音质严重劣化（类似高度压缩后的效果）。本地原MP3文件播放音质正常，更换多个不同MP3文件均存在相同问题。

后端代码（Flask） #

from flask import Flask, send_file, render_template
import os

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/run-python', methods=['GET'])
def run_python():
    # Define the file path
    file_path = os.path.join('static', 'test_file.mp3')
    
    # Check if the file exists
    if os.path.exists(file_path):
        # Send the file
        return send_file(file_path, as_attachment=True, mimetype='audio/mpeg', download_name='test_file.mp3')
    else:
        return "File not found", 404

if __name__ == '__main__':
    app.run(debug=True)

前端代码（index.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Run Python Example</title>
</head>
<body>
    <h1>Run Python Code</h1>
    <button id="runPythonButton">Download File</button>

    <script>
        document.getElementById('runPythonButton').addEventListener('click', function() {
            // Open the file in a new tab or prompt the download
            window.location.href = '/run-python';
        });
    </script>
</body>
</html>

问题分析与解决方法 #

核心原因 #

文件格式误判和音质劣化本质是MP3文件在传输过程中被损坏：Flask默认的send_file可能对二进制文件做了不必要的文本编码处理，导致文件内容异常，播放器无法正确识别为MP3，转而以MP4（同属MPEG容器）解析，同时损坏的内容表现为音质劣化。

解决方案 #

1. 优化Flask文件传输逻辑，强制二进制发送

修改后端send_file调用，关闭条件请求处理并明确文件传输模式：

return send_file(
    file_path,
    as_attachment=True,
    mimetype='audio/mpeg',
    download_name='test_file.mp3',
    conditional=False,  # 避免条件请求导致的文件内容截断
    mimetype='audio/mpeg3'  # 补充更精确的MIME类型
)

2. 手动读取二进制文件返回（更可靠的方式）

绕过send_file的自动处理，直接读取文件二进制内容构建响应：

from flask import make_response

@app.route('/run-python', methods=['GET'])
def run_python():
    file_path = os.path.join('static', 'test_file.mp3')
    if os.path.exists(file_path):
        with open(file_path, 'rb') as f:
            response = make_response(f.read())
            response.headers['Content-Type'] = 'audio/mpeg'
            response.headers['Content-Disposition'] = 'attachment; filename="test_file.mp3"'
            return response
    else:
        return "File not found", 404

3. 优化前端下载逻辑，强制二进制下载

替换window.location.href方式，用fetch获取Blob对象后触发下载，避免浏览器对文件的自动解析：

document.getElementById('runPythonButton').addEventListener('click', async function() {
    try {
        const response = await fetch('/run-python');
        if (!response.ok) throw new Error('下载失败');
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'test_file.mp3';
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(url);
        document.body.removeChild(a);
    } catch (err) {
        alert(err.message);
    }
});

验证步骤 #

1. 修改代码后重启Flask服务
2. 下载文件后对比原文件大小（若大小差异明显，说明传输仍有损坏）
3. 用播放器打开下载文件，确认格式识别和音质是否正常

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