Question

我想使用p5.js在浏览器中显示麦克风输入（最好是镀铬）。

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

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

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

非常感谢。

Answer 1

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

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;
    }
  }
}

Answer 2

对于有兴趣使用Processing语法在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

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

2 个答案: