Download - Web Audio APIでシンセサイザーの作成
![Page 1: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/1.jpg)
藍 圭介
http://d.hatena.ne.jp/aike@aike1000
Web Audio API で
シンセサイザーの作成
![Page 2: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/2.jpg)
Musicsm11764888 シャウト VSTsm11953495 ダブリング VST
http://youtu.be/MWrF0_du2rA 8bit ソフトシンセ
sm14366724 ビブラート描画
Programming
http://youtu.be/4qsxTV3sg-g 竹内関数音楽
![Page 3: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/3.jpg)
さてみなさん
![Page 4: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/4.jpg)
シンセ好きですか?
http://www.flickr.com/photos/sduck409/
![Page 5: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/5.jpg)
シンセが嫌いな男子なんていません。
http://www.flickr.com/photos/bdu/
![Page 6: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/6.jpg)
先日シンセ作りました
http://aikelab.net/websynth/
![Page 7: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/7.jpg)
意外とシンプル
100% Pure JavaScript
処理本体GUI シーケンサー
: 430 行: 450 行: 60 行
![Page 8: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/8.jpg)
短いコード
![Page 9: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/9.jpg)
その秘密は
![Page 10: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/10.jpg)
![Page 11: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/11.jpg)
Web Audio API
・ W3C Proposal・ Google Chrome 対応・ノードによる部品化 ( ゲイン、ディレイ、フィルター他 )
・ノード同士を connect() で連結https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
![Page 12: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/12.jpg)
ボリューム→ディレイ→出力の例
// コンテキスト作成var ctx = new webkitAudioContext();// ボリュームノード作成var volume = ctx.createGainNode();// ディレイノード作成var delay = ctx.createDelayNode();// ノード同士を接続volume.connect(delay);delay.connect(ctx.destination);
![Page 13: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/13.jpg)
ノード構成
VCO1
VCO2
Biquad
Filter
Gain
Delay
http://github.com/aike/webaudiosynth
![Page 14: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/14.jpg)
• 三角関数で簡単に波形生成• 意外に太い音が出た• フィルターのキレも良い感じ
• 本格的な楽器として使えそう
Web Audio API の音
![Page 15: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/15.jpg)
GUIhttp://www.flickr.com/photos/it290/
![Page 16: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/16.jpg)
一般的なウェブの GUI
![Page 17: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/17.jpg)
一般的な音楽ソフトの GUI
![Page 18: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/18.jpg)
音楽アプリをウェブで作る
問題点
![Page 19: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/19.jpg)
リアルなノブの描画ライブラリ
がない
![Page 20: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/20.jpg)
ないなら作ろう
![Page 21: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/21.jpg)
できた。
![Page 22: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/22.jpg)
http://github.com/aike/jqskin
![Page 23: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/23.jpg)
$('<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');
ノブ画像
パネル画像
ソースコード
jqSkin の使い方
![Page 24: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/24.jpg)
使用例
http://aikelab.net/jqskin/
![Page 25: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/25.jpg)
デモ
http://aikelab.net/websynth/
![Page 26: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/26.jpg)
まとめ
![Page 27: Web Audio APIでシンセサイザーの作成](https://reader035.vdocuments.mx/reader035/viewer/2022062300/55843e42d8b42a77068b507a/html5/thumbnails/27.jpg)
Web Audio API+
jqSkin
シンセが簡単に作れるよ !http://www.flickr.com/photos/sduck409/