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