是否有使用processing.js的可視化麥克風輸入的代碼示例？

Question

我想使用p5.js在瀏覽器中可視化麥克風輸入（最好是鉻）。

但是，網絡音頻api https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html讓我發瘋，因爲它非常複雜。

我只是想用聲音的幅度來控制p5中的繪圖。就這麼簡單。

有誰知道是否有任何相關的代碼示例？

非常感謝。

Answer 1

它看起來像這篇文章可以讓你的數據。儘管如此，您仍然必須將結果修補到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; 
    } 
    } 
} 

Answer 2

任何有興趣使用處理語法可視化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