无法在 p5.js 中获得麦克风输入

Question

我只是想获得我的音频电平并绘制一些效果，对于这个基本示例，只是一个椭圆，但我无法让它工作。以下是代码文件：

var mic;

function setup() {
  createCanvas(200, 200);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  background(0);
  var vol = mic.getLevel();
  ellipse(100, 100, vol * 200, vol * 200);
}

function touchStarted() {
  getAudioContext().resume()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>

我无法获得我的音频输入，因此它没有绘制任何东西。我尝试了 2 种不同的浏览器并在控制台中得到以下内容，希望它有助于调试：

Firefox：（在 Firefox 中我什么也没得到，只有这个错误）

Chrome：（在Chrome里面就是一个黑色的canvas，我说话的时候椭圆没有显示）

我搜索了一些 github 问题并尝试插入 touchStarted 函数但没有成功。

顺便说一句，我现在正在使用 Python Flask 服务器在本地托管它。

任何解决方案，指导将不胜感激。

Answer 1

我相信您遇到的 known issue in the p5.sound library. AudioIn.getLevel does not work on any non-Chromium based browsers. Additionally if your sketch is not working in Google Chrome it might have to do with how you are hosting it. There are issues loading the p5.sound library when using an insecure connection (see this GitHub issue or this one 有 link 解决方法）。您可以尝试的一件事是通过 localhost 而不是环回地址访问您的 Flask 服务器。当托管在安全平台上（例如 OpenProcessing.org）时，您的草图在 Chrome 对我有用。

无法在 p5.js 中获得麦克风输入

Cannot get mic input in p5.js

javascript

p5.js