Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

WebAudioAPIを使った音の扱い方


Google Developers Live Japan #7

https://plus.google.com/events/c544bi31lo05o3e7gka9v8cl090



g200kg Tatsuya Shinyagaito

WebAudio

- Webブラウザ上で音を扱う -

<audio>タグのようにmp3などの出来上がった音をページに組み込むのではなく、 プログラムで音を合成/加工する機能

WebAudioAPI

- W3Cで標準化作業中 -

現在のサポート状況

※ 未対応ブラウザでもそれなりに動作させるための Polyfill (WAAPISim) を作りました

WAAPISimの使い方

<script type="text/javascript" src="waapisim.js"></script>

これを読み込むとIE等でもWebAudioAPIが使えるようになります

※できない事もありますけど


GitHubに置いてあります :

https://github.com/g200kg/WAAPISim

WebAudioAPIで何ができるのか?

アルゴリズムから直接音の信号を生成/加工できる

WebAudioAPIの概要

ノードの組み合わせで音を作る

デジタルオーディオの扱い方

ノードを繋いでとりあえず音を出す

        var audioctx = new webkitAudioContext();
        var osc = audioctx.createOscillator();
        osc.connect(audioctx.destination);
        function Play() {
            osc.start(0);
        }
        

ノードのパラメータ

        var audioctx = new webkitAudioContext();
        var osc = audioctx.createOscillator();
        var gain = audioctx.createGain();
        osc.connect(gain);
        gain.connect(audioctx.destination);
        osc.start(0);
        function Setup() {
            osc.type = document.getElementById("type").selectedIndex;
            osc.frequency.value = parseFloat(document.getElementById("freq").value);
            gain.gain.value = parseFloat(document.getElementById("level").value);
        }
        

応用例

バッファソースから音を鳴らす

        var audioctx = new webkitAudioContext();
        var buffer = null;
        LoadSample(audioctx, "./sample.mp3");
        function Play() {
            var src = audioctx.createBufferSource();
            src.buffer = buffer;
            src.connect(audioctx.destination);
            src.start(0);
        }
        function LoadSample(ctx, url) {
            var req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = function() {
                if(req.response)
//                  buffer = audioctx.createBuffer(req.response, false);
                    audioctx.decodeAudioData(req.response, function(b){buffer=b;}, function(){});
            }
            req.send();
        }
       

応用例

ScriptProcessorで音を加工する(1)

        var audioctx = new webkitAudioContext();
        var bufsrc = audioctx.createBufferSource();
        var scrproc = audioctx.createScriptProcessor(2048,1,1);

        bufsrc.connect(scrproc);
        scrproc.connect(audioctx.destination);
        bufsrc.loop = 1; //<== loopフラグ
        scrproc.onaudioprocess = Proc; //<== ScriptProcessorの処理関数
        ・
        ・
        function Proc(ev) {
            var bufin = ev.inputBuffer.getChannelData(0);
            var bufout = ev.outputBuffer.getChannelData(0);
            for(var i = 0; i < 2048; ++i)
                bufout[i] = bufin[i] * eff;
        }
        

応用例

ScriptProcessorで音を加工する(2)

        var audioctx = new webkitAudioContext();
        var bufsrc = audioctx.createBufferSource();
        var scrproc = audioctx.createScriptProcessor(2048,1,1);

        bufsrc.connect(scrproc);
        scrproc.connect(audioctx.destination);
        bufsrc.loop = 1; //<== loopフラグ
        scrproc.onaudioprocess = Proc; //<== ScriptProcessorの処理関数
        ・
        ・
        function Proc(ev) {
            var bufin = ev.inputBuffer.getChannelData(0);
            var bufout = ev.outputBuffer.getChannelData(0);
            for(var i = 0; i < 2048; ++i) {
                var j = ((i * eff) | 0) % 2048;
                bufout[i] = bufin[j];
            }
        }
        

ノードの種類

互換性のために気をつける事

http://www.g200kg.com/

Web Music Developers JP

音楽系Webアプリに興味のある方はぜひ

https://groups.google.com/forum/#!forum/web-music-developers-jp