今回はWeb Audio APIとGrimoire.jsを組み合わせて遊んでみました。最近はGrimoire.jsと他のWebの技術を組み合わせて面白い表現ができないか考えています。

WebAudioAPIでmp3音源の波形を取得してみました。gifだと、音がないのでいささか地味ですが、このような表現もGrimoire.jsなら簡単に作成できます。

以下はほとんどWebAudioAPIを使用するためのコードですが、下部にGrimoire.jsのAPIに取得した音源の波形の値を入れています。

WebAudioAPIに関する基本的なことは下記の記事等を参考にさせていただきました。
http://qiita.com/soarflat/items/b60649195c16c7a43868

gr(function() {
    var d = new Date();
    var source, animationId;
    var audioContext = new AudioContext;
    var fileReader = new FileReader;
    var analyser = audioContext.createAnalyser();
    analyser.fftSize = 128;
    analyser.connect(audioContext.destination);
    fileReader.onload = function() {
        audioContext.decodeAudioData(fileReader.result, function(buffer) {
            if (source) {
                source.stop();
                cancelAnimationFrame(animationId);
            }
            source = audioContext.createBufferSource();
            source.buffer = buffer;
            source.connect(analyser);
            source.start(0);
            animationId = requestAnimationFrame(render);
        });
    };
    document.getElementById('file').addEventListener('change', function(e) {
        fileReader.readAsArrayBuffer(e.target.files[0]);
    });
    const $$ = gr("#main");
    render = function() {
        var spectrums = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(spectrums);
        for (var i = 1; i <= spectrums.length; i++) {
            $$("#mesh-" + i}).setAttribute("position", `${i/5},${spectrums[i-1]/100},0`);
        }
        animationId = requestAnimationFrame(render);
    };
});

WebGLの表現と他の技術を組み合わせてみると、表現の幅が広がることだと思います。この他にも面白い表現を探して共有できればいいですね。