如何将p5.js与Python Flask集成实现网页麦克风音频输入功能

1. 缺失p5.sound依赖库 #

p5的音频输入功能p5.AudioIn属于独立的p5.sound扩展库，你当前只引入了核心p5库，没有引入音频依赖，导致相关API无法调用。

2. Flask静态资源路径配置错误 #

Flask默认会从项目根目录的static文件夹读取静态资源（js、css、图片等），你当前将sketch.js放在自定义的files文件夹下，且html中使用相对路径../files/sketch.js请求，浏览器会返回404错误，js代码根本没有加载执行。

3. 违反浏览器敏感权限调用规则 #

当前主流浏览器的安全策略要求：麦克风、摄像头这类敏感权限的申请，必须由**用户主动交互行为（点击、触摸等）**触发，页面加载时自动在setup中调用mic.start()会被浏览器直接拦截，不会弹出权限申请窗口。

第一步：调整项目文件结构 #

--- static
     --- sketch.js
--- templates
     --- index.html
--- app.py

把原来的files文件夹重命名为static，适配Flask的默认静态资源规则。

第二步：修改index.html代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jarvis</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
    <!-- 新增p5.sound依赖引入 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
</head>
<body>
    Hello, This is home page!
    <!-- 新增触发麦克风的交互按钮 -->
    <button id="startMic">启动麦克风</button>
    <!-- 修改静态资源路径为Flask标准的/static前缀 -->
    <script type="text/javascript" src="/static/sketch.js"></script>
</body>
</html>

第三步：修改sketch.js代码 #

var mic;
var micAvailable = false;

function setup(){
    // 初始化音频输入，不要自动启动
    mic = new p5.AudioIn(function(err){
        console.error('音频初始化失败', err);
    });
    // 绑定按钮点击事件触发麦克风启动
    document.getElementById('startMic').addEventListener('click', function(){
        // 兼容部分浏览器需要先激活音频上下文的规则
        userStartAudio().then(function(){
            mic.start(function(){
                micAvailable = true;
                console.log('麦克风启动成功');
            }, function(err){
                console.error('麦克风启动失败', err);
            });
        });
    });
}

function draw() {
    if(micAvailable){
        // 测试：打印麦克风音量验证是否正常工作
        console.log(mic.getLevel());
    }
}

第四步：运行测试 #

app.py无需修改，直接执行python app.py启动服务，在浏览器访问http://localhost:5000，点击页面上的「启动麦克风」按钮，就会弹出权限申请窗口，同意后即可正常获取音频输入。

如果需要把录制的音频传到Flask后端，可以使用p5.SoundRecorderAPI录制音频blob，再通过fetch发起POST请求发送到Flask的对应接口，后端用request.files接收音频文件存储即可。

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