Web Audio API の基本の基 その6 （filterをつかって音をフィルタリングする）

今回はfilterをつかってオーディオをフィルタリングしてみました。
前回のビジュアライズのコードを残しておいたので、比較してみるとわかりやすいです。
ローパスフィルタをかけてみたので低音が強調されています。

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var canvas   = doc.getElementById("canvas"),
        ctx      = canvas.getContext("2d"), 
        request  = new XMLHttpRequest(),
        audioCtx = new AudioContext(),
        filter = audioCtx.createBiquadFilter();
    
    filter.type = "lowpass";
    filter.frequency.value = 440;
    
    request.onload = function () {
        audioCtx.decodeAudioData(this.response, function (evt) {
            var source   = audioCtx.createBufferSource(),
                analyser = audioCtx.createAnalyser(evt);;
            
            var LENGTH = 64,
                data   = new Uint8Array(LENGTH),
                w      = 0,
                i      = 0;
            
            source.buffer = evt;
            source.connect(filter);
            filter.connect(analyser);
            filter.connect(audioCtx.destination);
            
            source.loop = true;
            source.start();
            
            setInterval(function() {
                canvas.width  = window.innerWidth;
                canvas.height = window.innerHeight;
                
                ctx.fillStyle = "#3e3e3e";
                
                w = canvas.width / LENGTH,
                    
                    analyser.getByteFrequencyData(data);
                
                for (i = 0; i < LENGTH; ++i) {
                    ctx.rect(i * w, canvas.height - data[i], w, data[i]);
                }
                
                ctx.fill();
            }, 20);
        });
    };
    
    request.open("GET", "http://jsrun.it/assets/u/L/S/o/uLSoy.mp3", true);
    request.responseType = "arraybuffer";
    
    request.send();
    
})(this, document);

HTML

<canvas id="canvas"></canvas>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background: #e3e3e3;
    overflow: hidden;
}

DEMO

http://jsdo.it/kimmy/Kajljsdo.it