WebAudioAPIを使った音の扱い方

Google Developers Live Japan #7

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

g200kg　Tatsuya Shinyagaito

WebAudio

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

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

• Flash / Java => 今も使えなくはないけど...
• Audio Data API (Firefox) => Obsolete
• Web Audio API (Chrome) => W3Cで標準化作業中

WebAudioAPI

- W3Cで標準化作業中 -

現在のサポート状況

• Chrome : WebAudioAPI実装のリファレンス
• Safari : Chromeに近い。API仕様が一部古いままのものがある
• Firefox : 実装中。大体動作するようになりつつあるが一部の機能は未実装
• Opera : BlinkベースのものはChromeと同等
• IE : 未対応
• モバイルデバイス : webkitベースのブラウザならば大体動作する。ただし注意点あり

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

WAAPISimの使い方

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

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

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

GitHubに置いてあります :

https://github.com/g200kg/WAAPISim

WebAudioAPIで何ができるのか?

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

• 例1 ) WebModular
• 例2 ) Teburin
• 例3 ) RenoidPlayer

WebAudioAPIの概要

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

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

• 型付き配列 Float32Array で扱う
• ステレオデータの場合は配列が2つ
• 振幅は -1.0 ～ +1.0
• サンプリング周波数はブラウザの実装依存
  (44.1kHz または 48kHz)

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

        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];
            }
        }
        

ノードの種類

• Gain : 音量をコントロールする
• Delay : 音を遅らせる
• AudioBufferSource : バッファから音を再生する
• MediaElementAudioSource : DOM内のオーディオを再生する
• ScriptProcessor : JavaScriptで音のデータそのものを加工する
• Panner : 音を3D空間に配置する
• Convolver : 畳み込み演算によって残響効果やフィルター効果を付ける
• Analyser : 音の周波数分析を行う
• ChannelSplitter : 複数チャンネルの音を別々の信号に分離する
• ChannelMerger : 複数の信号から複数チャンネルの音を合成する
• DynamicsCompressor : 音量変化を抑える(コンプレッサー)
• BiquadFilter : フィルター効果を付加する
• WaveShaper : テーブル参照で波形を変換する
• Oscillator : 発振器。音の元となる信号を作る
• MediaStreamAudioSource : WebRTCとの連携

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

• 必要なパフォーマンスに注意 (特にモバイルデバイス)
• AudioContextのプリフィックス(webkitAudioContext / AudioContext)
• 古いAPI [Safari]
  
  • 関数名 旧:noteOn() => 新:start()等
  • パラメータの型が異なるものがある (数値=>文字列)
  • 未対応機能
• モバイルデバイスではまずユーザーアクションがないと音が出ない
• iOS Safari のScriptProcessorは入力が繋がっていないと動作しない
• サンプリング周波数 : 環境によって異なる (44.1kHz / 48kHz)

http://www.g200kg.com/

• Web Audio API 関連のアプリ
  
  今日話したような Web Audio API の解説なんかも書いています
• Web MIDI API　関連のアプリ
  
  Web楽器同士を連携動作させる WebMIDILinkという仕組みの提案をしています

Web Music Developers JP

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

• Web Audio API
• Web MIDI API

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