Flask音频流支持浏览器端进度条跳转的代码修改咨询

问题本质 #

你当前的代码仅返回完整音频流，没有处理HTTP协议的范围请求（Range Request）规范，浏览器无法请求音频的指定分段，因此不支持进度跳转。要实现该功能需要让服务端支持返回206 Partial Content类型的分段响应。

修正后的完整代码 #

import os
from flask import Flask, Response, request

app = Flask(__name__)

@app.route("/mp3")
def stream_mp3():
    mp3_path = "signals/my.mp3"
    file_size = os.path.getsize(mp3_path)
    # 解析Range请求头
    range_header = request.headers.get("Range", None)
    if range_header:
        # 处理range格式如 bytes=0-1023
        _, range_str = range_header.split("=")
        start_str, end_str = range_str.split("-")
        start = int(start_str) if start_str else 0
        end = int(end_str) if end_str else file_size - 1
        length = end - start + 1
        # 读取指定分段的内容
        def generate_partial():
            with open(mp3_path, "rb") as mp3:
                mp3.seek(start)
                remaining = length
                while remaining > 0:
                    chunk_size = min(1024, remaining)
                    data = mp3.read(chunk_size)
                    if not data:
                        break
                    yield data
                    remaining -= chunk_size
        # 构造分段响应
        response = Response(generate_partial(), 206, mimetype="audio/mp3")
        response.headers.add("Content-Range", f"bytes {start}-{end}/{file_size}")
        response.headers.add("Content-Length", str(length))
    else:
        # 无Range头时返回全量内容
        def generate_full():
            with open(mp3_path, "rb") as mp3:
                data = mp3.read(1024)
                while data:
                    yield data
                    data = mp3.read(1024)
        response = Response(generate_full(), mimetype="audio/mp3")
        response.headers.add("Content-Length", str(file_size))
    # 告知浏览器支持字节范围请求
    response.headers.add("Accept-Ranges", "bytes")
    return response

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

关键修改说明 #

• 修正了原代码中stream-mp3的函数名语法错误（Python函数不允许使用横杠，修改为下划线命名stream_mp3）
• 新增Accept-Ranges: bytes响应头，告知浏览器当前资源支持分段请求
• 解析请求头中的Range字段，获取用户跳转后的音频起始偏移量
• 响应状态码返回206 Partial Content，标识本次返回的是资源的部分内容
• 文件读取从指定偏移量开始，仅返回请求范围内的字节数据，避免返回全量内容

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