web audio apiでシンセサイザーの作成

藍　圭介

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/