web audio apiとnode.jsでウェブ楽器作った ~ beatonicaの紹介 ~
DESCRIPTION
Sapporo.js-2012.05.05発表資料TRANSCRIPT
藍 圭介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ががサウンドプログラミングサウンドプログラミングのの
主役になる主役になる日は近い日は近い