JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる2


前回の記事でWeb Audio APIのAnalyzerNodeを使って、マイクで拾った音から周波数データを取得してみた。

実際に取得してみて、ハウリングが発生してという表現が正しいかわからないが、

ファンファンファンという耳が痛くなるような音が鳴り出した。


このハウリング対策として、

マイクから音を拾う際にBiquadFilterというフィルターをかます。


説明の前に実際のコードを書いてみる。


<canvas id="canvas" width="500" height="200" style="border:1px solid #000000;"></canvas>
<script>
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");

    //様々なブラウザでマイクへのアクセス権を取得する
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    //audioのみtrue
    navigator.getUserMedia({
        audio: true,
        video: false
    }, successFunc, errorFunc);

    var audioCtx = new(window.AudioContext || window.webkitAudioContext)();

    //FFT
    var analyser = audioCtx.createAnalyser();
    analyser.fftSize = 2048;
    var filter = audioCtx.createBiquadFilter();
    filter.type = 0;
    filter.frequency.value = 440;

    function successFunc(stream) {
        var src = audioCtx.createMediaStreamSource(stream);
        src.connect(filter);
        filter.connect(analyser);
        analyser.connect(audioCtx.destination);

        setInterval(draw, 500);
        draw();
    }

    function draw() {
        /** 描写周りのコードは省略 **/
    }

    // Web Audio APIが使えなかった時
    function errorFunc(error) {
        alert("error");
    }

</script>

黒字で書いた個所が変更点で、

タイプが0のフィルターを用意し、FFTに集音した音波を解析させる前に、音波をフィルターにかましている。


このコードを実行して、前回と同じような発声をしてみると、



低い周波数のみ取得している。


今回使用したフィルターのタイプの0はlowpassと呼ばれるもので、

特定の周波数よりも低い下だけを通すフィルターらしい。


filter.frequency.value = 440;

の数字を変えてみると、同じような発声でも描写が変わる。


パソコンの前の手を叩いて、何らかの処理が変わるプログラムを書く時、

FFTでどこまでの周波数のデータをとって、

フィルターで更に雑音をカットして、

必要な分だけデータを取得するということが必要そうだ。


BiquadFilterのタイプについて詳しく知りたい方は下記のページ(英語)を読むと良いです。

BiquadFilterNode - Web APIs | MDN