web audio apiとnode.jsでウェブ楽器作った ～ beatonicaの紹介 ～

藍　圭介http://d.hatena.ne.jp/aike

@aike1000

Web Audio APIWeb Audio APIととNode.Node.jsjsででウェブ楽器ウェブ楽器作った作った

〜 Beatonicaの紹介 〜

ウェブ楽器？ウェブ楽器？CCCC--BYBY--NCNC--SASA　　http://www.flickr.com/photos/http://www.flickr.com/photos/mediawenchmediawench/2037762495//2037762495/

BeatonicaBeatonicahttp://beatonica.com/http://beatonica.com/

一部で話題一部で話題

クリッククリックするとすると音音が出るが出る

http://www.http://www.etsyetsy.com/shop/.com/shop/thepusspussthepusspuss

※※写真はイメージです写真はイメージです

自動自動でどんどんでどんどん音楽生成音楽生成

CCCC--BYBY--NCNC--SASA　　http://www.flickr.com/photos/michaelz1/4414898915/http://www.flickr.com/photos/michaelz1/4414898915/

ソーシャルグラフソーシャルグラフのの多様性多様性をを

音音として鳴らすとして鳴らすCCCC--BYBY--NCNC--SASA　　http://www.flickr.com/photos/http://www.flickr.com/photos/koesterankoesteran/5185861058//5185861058/

クラシック版　　　　ロック版クラシック版　　　　ロック版

Web Audio APIWeb Audio APICCCC--BYBY　　http://www.flickr.com/photos/http://www.flickr.com/photos/nkashirinnkashirin/5325053378//5325053378/

ウェブブラウザウェブブラウザネイティブネイティブののサウンドサウンドAPIAPI

と、いうことはと、いうことは

　プラグイン不要　プラグイン不要No No FlashFlashNo No Java AppletJava Applet

YesYes JavaScriptJavaScriptCCCC--BYBY--NDND　　http://www.flickr.com/photos/http://www.flickr.com/photos/joecrimmingsjoecrimmings/2238699461//2238699461/

サーバ側サーバ側ははどうしよう？どうしよう？

そうだ、そうだ、あれあれががあるじゃないかあるじゃないか

Node.Node.jsjs

YesYes JavaScriptJavaScriptCCCC--BYBY--NDND　　http://www.flickr.com/photos/http://www.flickr.com/photos/joecrimmingsjoecrimmings/2238699461//2238699461/

全部全部JavaScriptJavaScript

処理処理ののほとんどはほとんどは

クライアント側クライアント側

ソースソース読み読み放題放題

Web Audio APIWeb Audio APICCCC--BYBY　　http://www.flickr.com/photos/http://www.flickr.com/photos/nkashirinnkashirin/5325053378//5325053378/

音音のの加工機能加工機能がが充実充実

ノードノードによるによる部品化部品化

ボリューム、パン、ミキサーボリューム、パン、ミキサーその他エフェクターその他エフェクター

機器機器をケーブルでをケーブルで接続接続するようにするようにコーディングコーディング

ボリュームボリューム→→ディレイディレイ→→出⼒出⼒の例の例// コンテキスト作成var ctx = new webkitAudioContext();// ボリュームノード作成var volume = ctx.createGainNode();// ディレイノード作成var delay = ctx.createDelayNode();// ノード同士を接続volume.connect(delay);delay.connect(ctx.destination);

まだちょっとまだちょっといまいちいまいちなな所所もあるもある

MP3MP3ファイルをファイルを非同期非同期でロードでロードして鳴らすして鳴らす処理処理

こうですかこうですか!?!?わかりませんわかりません><><SampleBuffer.prototype.loadBuffer =function(callback) {

var request = new XMLHttpRequest();request.open("GET", this.url, true);request.responseType = "arraybuffer";var self = this;request.onload = function() {

self.context.decodeAudioData(request.response,function(buffer) {

if (!buffer) {console.log('error: ' + self.url);return;

}self.buffer = buffer;if (callback) {

callback(self.buffer.getChannelData(0));}

},function() {

console.log('error: ' + self.url);return;

});

}request.onerror = function() {

alert('BufferLoader: XHR error');}request.send();

}

Player.prototype.playSound = function(buffer) {

this.src = this.context.createBufferSource();this.src.buffer = buffer;this.src.connect(this.context.destination);this.src.noteOn(0);

};

←MP3ファイルロード　　XHR処理を⾃前で書く必要があり　　エラー対応も⼊れるとけっこう⻑くなる

↑MP3再生　　なぜか音を鳴らすたびにcreateBufferSourceで　　バッファ作成する必要がある

もっと効率の良い⽅法があれば教えてください！

なぜかあまりシンプルに書けない

Node.Node.jsjs簡単簡単

モジュールモジュール充実充実express express webwebフレームワークフレームワークejsejs　　　　　　　　　　　　 テンプレートエンジンテンプレートエンジンeveryautheveryauth OAuthOAuth認証等認証等twittwit Twitter APITwitter API

サーバサーバ側コード側コードシンプルシンプル

約約550550⾏⾏

Node.Node.jsjs難しい難しい

モジュールモジュール⾼度すぎ⾼度すぎほとんどほとんど⿊魔術⿊魔術

CCCC--BYBY　　http://www.flickr.com/photos/http://www.flickr.com/photos/andersbachmannandersbachmann/5934075365//5934075365/

トラブル時にトラブル時に原因究明原因究明が大変が大変

Node.Node.jsjs難しい難しい

// イベントドリブン＋メソッドチェーン＋無名関数引数foo(function() {　　処理}).bar(function() {　　処理}).hoge(function() {　　　・・・続く

・不親切な・不親切なエラーメッセージエラーメッセージ・・404404ページページ出すの大変出すの大変

((expressexpressののapp.useapp.useが⾒つけにくかったが⾒つけにくかった))

・追いづらい・追いづらいライブラリライブラリ処理処理

CCCC--BYBY--NDND　　http://www.flickr.com/photos/http://www.flickr.com/photos/joecrimmingsjoecrimmings/2238699461//2238699461/

JavaScriptJavaScriptががサウンドプログラミングサウンドプログラミングのの

主役になる主役になる日は近い日は近い