DevFestX Sapporo 2012

1. Web Audio APIで
シンセサイザーの作成
藍 圭介
http://d.hatena.ne.jp/aike
@aike1000

2. Music
sm11764888 シャウトVST
sm11953495 ダブリングVST
sm14366724 ビブラート描画
http://youtu.be/MWrF0_du2rA
8bit ソフトシンセ
http://youtu.be/4qsxTV3sg-g
竹内関数音楽
Programming

3. さて
みなさん

4. シンセ
好きですか？
http://www.flickr.com/photos/sduck409/

5. シンセが嫌いな
男子なんていません。
http://www.flickr.com/photos/bdu/

6. 先日シンセ作りました
http://aikelab.net/websynth/

7. 意外とシンプル
100% Pure JavaScript
処理本体 ：430行
GUI ：450行
シーケンサー： 60行

8. 短い
コード

9. その
秘密は

11. Web Audio API
・W3C Proposal
・Google Chrome対応
・ノードによる部品化
(ゲイン、ディレイ、フィルター他)
・ノード同士をconnect()で連結
https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

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

13. ノード構成
Biquad Gain
VCO1 Filter
Delay
VCO2
http://github.com/aike/webaudiosynth

14. Web Audio APIの音
• 三角関数で簡単に波形生成
• 意外に太い音が出た
• フィルターのキレも良い感じ
• 本格的な楽器として使えそう

15. http://www.flickr.com/photos/it290/

16. 一般的な
ウェブのGUI

17. 一般的な
音楽ソフトのGUI

18. 音楽アプリを
ウェブで作る
問題点

19. リアルなノブの
描画ライブラリ
がない

20. ないなら
作ろう

21. できた。

22. http://github.com/aike/jqskin

23. jqSkinの使い方 $('<img />').panel({
id: 'id0', image: 'panel.png',
left: 10, top: 110
}).appendTo('#draw');
$('<img />').knob({
id: 'id1', image: 'knob.png',
left: 180, top: 145,
パネル画像 width: 80, height: 80
}).appendTo('#draw');
ソースコード
ノブ画像

24. 使用例
http://aikelab.net/jqskin/

25. デモ
http://aikelab.net/websynth/

26. まとめ

27. Web Audio API
+
jqSkin
シンセが簡単に作れるよ!
http://www.flickr.com/photos/sduck409/