如何从Flask应用设置HTML音频文件的src并实现自动播放

核心问题 #

你当前的代码错误地将音频的二进制原始数据直接赋值给了<source>的src属性，而浏览器要求src必须是一个能获取音频资源的URL地址，这导致音频控件无法加载资源，呈现禁用状态。

解决方案步骤 #

1. 拆分路由：将页面渲染与音频生成分离

修改Python代码，新增一个专门生成并返回音频的路由，原路由只负责渲染页面：

from flask import Flask, send_file, render_template
import random
import wave
import io

app = Flask(__name__)

# 负责渲染首页
@app.route('/')
def paadas():
    return render_template("index.html")

# 负责生成并返回拼接后的音频
@app.route('/generate-audio')
def generate_audio():
    def merge_audio(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

    # 随机选择音频文件
    files = []
    number = random.randint(1,10)
    files.append("../numbers/" + str(number) + ".wav")
    times = random.randint(1,10)
    files.append("../times/" + str(times) + ".wav")
    
    audio_buffer = merge_audio(files)
    # 返回音频资源，指定MIME类型
    return send_file(audio_buffer, mimetype="audio/wav", as_attachment=False)

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

2. 修改模板，指向音频路由

更新index.html中的<audio>标签，将src设置为新增的音频路由：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Paadas</title>
</head>
<body>
   <h1>Welcome to Padaas</h1>
   <audio controls autoplay>
     <source src="/generate-audio" type="audio/wav">
     Your browser does not support the audio element.
   </audio>

   <!-- 处理浏览器自动播放限制的脚本 -->
   <script>
     // 监听用户首次交互，触发音频播放
     document.addEventListener('click', function initPlay() {
       const audioEl = document.querySelector('audio');
       audioEl.play().then(() => {
         document.removeEventListener('click', initPlay);
       }).catch(err => console.error('音频播放失败:', err));
     }, { once: true });
   </script>
</body>
</html>

关键补充说明 #

目前主流浏览器都有自动播放限制，仅当用户与页面产生交互（如点击、触摸）后，才能自动播放音频。上述脚本就是为了适配这个限制：用户第一次点击页面时，自动触发音频播放。

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