Sapporo.js-2012.05.05発表資料

1. Web Audio APIと
Node.jsでウェブ楽器作った
〜 Beatonicaの紹介 〜
藍 圭介
http://d.hatena.ne.jp/aike
@aike1000

2. ウェブ楽器？
CC-BY-NC-SA http://www.flickr.com/photos/mediawench/2037762495/
CC- BY- NC- SA http://www.flickr.com/photos/mediawench/2037762495/

3. Beatonica
http://beatonica.com/

4. 一部で話題

5. クリックすると
音が出る
※写真はイメージです
http://www.etsy.com/shop/thepusspuss
http://www.etsy.com/shop/thepusspuss

6. 自動でどんどん
音楽生成
CC-BY-NC-SA http://www.flickr.com/photos/michaelz1/4414898915/
CC- BY- NC- SA

7. ソーシャルグラフ
の多様性を
音として鳴らす
CC-BY-NC-SA http://www.flickr.com/photos/koesteran/5185861058/
CC- BY- NC- SA http://www.flickr.com/photos/koesteran/5185861058/

8. クラシック版 ロック版

9. Web Audio API
CC-BY http://www.flickr.com/photos/nkashirin/5325053378/
CC- BY http://www.flickr.com/photos/nkashirin/5325053378/

10. ウェブブラウザ
ネイティブの
サウンドAPI

11. と、いうことは

12. プラグイン不要
No Flash
No Java Applet

13. Yes JavaScript
CC-BY-ND http://www.flickr.com/photos/joecrimmings/2238699461/
CC- BY- ND http://www.flickr.com/photos/joecrimmings/2238699461/

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

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

16. Node.js

17. Yes JavaScript
CC-BY-ND http://www.flickr.com/photos/joecrimmings/2238699461/
CC- BY- ND http://www.flickr.com/photos/joecrimmings/2238699461/

18. 全部
JavaScript

19. 処理の
ほとんどは
クライアント側

20. ソース
読み放題

21. Web Audio API
CC-BY http://www.flickr.com/photos/nkashirin/5325053378/
CC- BY http://www.flickr.com/photos/nkashirin/5325053378/

22. 音の加工機能
が充実

23. ノードによる
部品化
ボリューム、パン、ミキサー
その他エフェクター

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

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

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

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

28. こうですか!?わかりません><
SampleBuffer.prototype.loadBuffer = Player.prototype.playSound =
function(callback) { function(buffer) {
var request = new XMLHttpRequest(); this.src = this.context.createBufferSource();
request.open("GET", this.url, true); this.src.buffer = buffer;
request.responseType = "arraybuffer"; this.src.connect(this.context.destination);
var self = this; this.src.noteOn(0);
request.onload = function() { };
self.context.decodeAudioData(
request.response,
function(buffer) { ↑MP3再生
if (!buffer) {
console.log('error: ' + self.url);
なぜか音を鳴らすたびにcreateBufferSourceで
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');
} ←MP3ファイルロード
request.send(); XHR処理を⾃前で書く必要があり
} エラー対応も⼊れるとけっこう⻑くなる

29. Node.js
簡単

30. モジュール充実
express webフレームワーク
ejs テンプレートエンジン
everyauth OAuth認証等
twit Twitter API

31. サーバ側コード
シンプル
約550⾏

32. Node.js
難しい

33. モジュール⾼度すぎ
ほとんど⿊魔術
トラブル時に原因究明が大変
CC-BY http://www.flickr.com/photos/andersbachmann/5934075365/
CC- BY http://www.flickr.com/photos/andersbachmann/5934075365/

34. Node.js難しい
・不親切なエラーメッセージ
・404ページ出すの大変
(expressのapp.useが⾒つけにくかった)
・追いづらいライブラリ処理
// イベントドリブン＋メソッドチェーン＋無名関数引数
foo(function() {
処理
})
.bar(function() {
処理
})
.hoge(function() {
・・・続く

36. JavaScriptが
サウンドプログラミングの
主役になる日は近い
CC-BY-ND http://www.flickr.com/photos/joecrimmings/2238699461/
CC- BY- ND http://www.flickr.com/photos/joecrimmings/2238699461/