web audio apiとnode.jsでウェブ楽器作った ~ beatonicaの紹介 ~
DESCRIPTION
Sapporo.js-2012.05.05発表資料TRANSCRIPT
![Page 1: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/1.jpg)
藍 圭介http://d.hatena.ne.jp/aike
@aike1000
Web Audio APIWeb Audio APIととNode.Node.jsjsででウェブ楽器ウェブ楽器作った作った
〜 Beatonicaの紹介 〜
![Page 2: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/2.jpg)
ウェブ楽器?ウェブ楽器?CCCC--BYBY--NCNC--SASA http://www.flickr.com/photos/http://www.flickr.com/photos/mediawenchmediawench/2037762495//2037762495/
![Page 3: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/3.jpg)
BeatonicaBeatonicahttp://beatonica.com/http://beatonica.com/
![Page 4: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/4.jpg)
一部で話題一部で話題
![Page 5: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/5.jpg)
クリッククリックするとすると音音が出るが出る
http://www.http://www.etsyetsy.com/shop/.com/shop/thepusspussthepusspuss
※※写真はイメージです写真はイメージです
![Page 6: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/6.jpg)
自動自動でどんどんでどんどん音楽生成音楽生成
CCCC--BYBY--NCNC--SASA http://www.flickr.com/photos/michaelz1/4414898915/http://www.flickr.com/photos/michaelz1/4414898915/
![Page 7: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/7.jpg)
ソーシャルグラフソーシャルグラフのの多様性多様性をを
音音として鳴らすとして鳴らすCCCC--BYBY--NCNC--SASA http://www.flickr.com/photos/http://www.flickr.com/photos/koesterankoesteran/5185861058//5185861058/
![Page 8: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/8.jpg)
クラシック版 ロック版クラシック版 ロック版
![Page 9: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/9.jpg)
Web Audio APIWeb Audio APICCCC--BYBY http://www.flickr.com/photos/http://www.flickr.com/photos/nkashirinnkashirin/5325053378//5325053378/
![Page 10: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/10.jpg)
ウェブブラウザウェブブラウザネイティブネイティブののサウンドサウンドAPIAPI
![Page 11: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/11.jpg)
と、いうことはと、いうことは
![Page 12: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/12.jpg)
プラグイン不要 プラグイン不要No No FlashFlashNo No Java AppletJava Applet
![Page 13: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/13.jpg)
YesYes JavaScriptJavaScriptCCCC--BYBY--NDND http://www.flickr.com/photos/http://www.flickr.com/photos/joecrimmingsjoecrimmings/2238699461//2238699461/
![Page 14: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/14.jpg)
サーバ側サーバ側ははどうしよう?どうしよう?
![Page 15: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/15.jpg)
そうだ、そうだ、あれあれががあるじゃないかあるじゃないか
![Page 16: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/16.jpg)
Node.Node.jsjs
![Page 17: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/17.jpg)
YesYes JavaScriptJavaScriptCCCC--BYBY--NDND http://www.flickr.com/photos/http://www.flickr.com/photos/joecrimmingsjoecrimmings/2238699461//2238699461/
![Page 18: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/18.jpg)
全部全部JavaScriptJavaScript
![Page 19: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/19.jpg)
処理処理ののほとんどはほとんどは
クライアント側クライアント側
![Page 20: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/20.jpg)
ソースソース読み読み放題放題
![Page 21: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/21.jpg)
Web Audio APIWeb Audio APICCCC--BYBY http://www.flickr.com/photos/http://www.flickr.com/photos/nkashirinnkashirin/5325053378//5325053378/
![Page 22: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/22.jpg)
音音のの加工機能加工機能がが充実充実
![Page 23: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/23.jpg)
ノードノードによるによる部品化部品化
ボリューム、パン、ミキサーボリューム、パン、ミキサーその他エフェクターその他エフェクター
![Page 24: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/24.jpg)
機器機器をケーブルでをケーブルで接続接続するようにするようにコーディングコーディング
![Page 25: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/25.jpg)
ボリュームボリューム→→ディレイディレイ→→出⼒出⼒の例の例// コンテキスト作成var ctx = new webkitAudioContext();// ボリュームノード作成var volume = ctx.createGainNode();// ディレイノード作成var delay = ctx.createDelayNode();// ノード同士を接続volume.connect(delay);delay.connect(ctx.destination);
![Page 26: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/26.jpg)
まだちょっとまだちょっといまいちいまいちなな所所もあるもある
![Page 27: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/27.jpg)
MP3MP3ファイルをファイルを非同期非同期でロードでロードして鳴らすして鳴らす処理処理
![Page 28: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/28.jpg)
こうですかこうですか!?!?わかりませんわかりません><><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で バッファ作成する必要がある
もっと効率の良い⽅法があれば教えてください!
なぜかあまりシンプルに書けない
![Page 29: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/29.jpg)
Node.Node.jsjs簡単簡単
![Page 30: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/30.jpg)
モジュールモジュール充実充実express express webwebフレームワークフレームワークejsejs テンプレートエンジンテンプレートエンジンeveryautheveryauth OAuthOAuth認証等認証等twittwit Twitter APITwitter API
![Page 31: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/31.jpg)
サーバサーバ側コード側コードシンプルシンプル
約約550550⾏⾏
![Page 32: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/32.jpg)
Node.Node.jsjs難しい難しい
![Page 33: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/33.jpg)
モジュールモジュール⾼度すぎ⾼度すぎほとんどほとんど⿊魔術⿊魔術
CCCC--BYBY http://www.flickr.com/photos/http://www.flickr.com/photos/andersbachmannandersbachmann/5934075365//5934075365/
トラブル時にトラブル時に原因究明原因究明が大変が大変
![Page 34: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/34.jpg)
Node.Node.jsjs難しい難しい
// イベントドリブン+メソッドチェーン+無名関数引数foo(function() { 処理}).bar(function() { 処理}).hoge(function() { ・・・続く
・不親切な・不親切なエラーメッセージエラーメッセージ・・404404ページページ出すの大変出すの大変
((expressexpressののapp.useapp.useが⾒つけにくかったが⾒つけにくかった))
・追いづらい・追いづらいライブラリライブラリ処理処理
![Page 35: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/35.jpg)
![Page 36: Web Audio APIとNode.jsでウェブ楽器作った ~ Beatonicaの紹介 ~](https://reader034.vdocuments.mx/reader034/viewer/2022052316/559460cf1a28abab6a8b4655/html5/thumbnails/36.jpg)
CCCC--BYBY--NDND http://www.flickr.com/photos/http://www.flickr.com/photos/joecrimmingsjoecrimmings/2238699461//2238699461/
JavaScriptJavaScriptががサウンドプログラミングサウンドプログラミングのの
主役になる主役になる日は近い日は近い