processing.js를 사용하여 마이크 입력을 시각화하는 코드 샘플이 있습니까?

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

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