はじめての Web Audio API

デモ

アジェンダ

  1. Web Audio API とは何か？
  2. オーディオの基礎知識
  3. Web Audio API の全体像
  4. サンプルコード
  5. 関連ライブラリ

Web Audio API とは何か？

Audio タグと何が違うのか

Audio Data API と何が違うのか

Web Audio API の用途

デジタルオーディオの基礎知識

音とはすなわち空気の振動

音をデジタルで再現する

Web Audio API の全体像

無数のモジュールで構成されている

主なインターフェース

典型的なモジュラー構成

様々な AudioNode

様々な AudioNode

デモ

サンプルコード

再生の基本

var c = new webkitAudioContext();
var source = c.createBufferSource(); // BufferSourceNode を生成
source.buffer = buffer; // 予め読み込んでおいたオーディオファイル
source.connect(c.destination); // ノードを接続
source.noteOn(0); // 音声を再生

ノードを追加する

var g = c.createGainNode(); // GainNode を生成
g.gain.value = 0.5; // ボリュームを半分にする
source.connect(g); // 音源を GainNode に接続
g.connect(c.destination); // GainNodeを出力に接続

オーディオ読み込みの基本

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer'; // バイナリとして読み込む

// 読み込んだオーディオを非同期にデコード
xhr.onload = function() {
  context.decodeAudioData(xhr.response, function(buffer) {
    dogBarkingBuffer = buffer;
  }, onError);
}
xhr.send();

関連リソース

仕様・チュートリアル

ライブラリ

Thank you!