p5.js を使用して、ブラウザー内でマイク入力を視覚化したいと考えています (Chrome の方が良い)。
ただし、Web オーディオ API https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.htmlは非常に複雑であるため、気が狂ってしまいます。
サウンドの振幅を使用して p5 の描画を制御したいだけです。それだけ簡単です。
関連するコードサンプルがあるかどうかは誰にもわかりませんか?
どうもありがとう。
p5.js を使用して、ブラウザー内でマイク入力を視覚化したいと考えています (Chrome の方が良い)。
ただし、Web オーディオ API https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.htmlは非常に複雑であるため、気が狂ってしまいます。
サウンドの振幅を使用して p5 の描画を制御したいだけです。それだけ簡単です。
関連するコードサンプルがあるかどうかは誰にもわかりませんか?
どうもありがとう。
この記事でデータが取得できるようです。ただし、結果を自分で Processing にパッチする必要があります。
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;
}
}
}
Processing 構文を使用して JS でマイク入力を視覚化することに関心がある場合は、p5.sound.jsアドオン ライブラリでp5.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