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

fft_res2

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

前回の記事で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に集音した音波を解析させる前に、音波をフィルターにかましている。

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

biquad_filter