html - 是否有使用 processing.js 可视化麦克风输入的代码示例？

Question

我想使用 p5.js 在浏览器中可视化麦克风输入（最好是 chrome）。

然而，网络音频 api https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html让我抓狂，因为它非常复杂。

我只想使用声音的幅度来控制 p5 中的绘图。就这么简单。

有人知道是否有任何相关的代码示例吗？

非常感谢。

Answer 1

对于任何有兴趣使用处理语法在 JS 中可视化麦克风输入的人，请尝试使用p5.js和p5.sound.js插件库。

这是一个测量 p5.AudioIn 幅度的示例（http://p5js.org/reference/#/p5.AudioIn）

var mic;

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

function draw(){
  micLevel = mic.getLevel();
}

您还可以轻松分析频谱，这是另一个示例 http://p5js.org/learn/examples/Sound_Frequency_Spectrum.php

Answer 2

看起来这篇文章可以为您提供数据。不过，您必须自己将结果修补到处理中。

http://www.html5rocks.com/en/tutorials/webaudio/games/

此功能着眼于削波强信号，但看起来您应该能够获得音频电平。

function processAudio(e) {
  var buffer = e.inputBuffer.getChannelData(0);

  var isClipping = false;
  // Iterate through buffer to check if any of the |values| exceeds 1.
  for (var i = 0; i < buffer.length; i++) {
    var absValue = Math.abs(buffer[i]);
    if (absValue >= 1) {
      isClipping = true;
      break;
    }
  }
}