Successfully reported this slideshow.
Your SlideShare is downloading. ×

Web Audio APIでシンセサイザーの作成

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
RubyGemsでわるふざけ
RubyGemsでわるふざけ
Loading in …3
×

Check these out next

1 of 27 Ad
Advertisement

More Related Content

Similar to Web Audio APIでシンセサイザーの作成 (20)

Recently uploaded (20)

Advertisement

Web Audio APIでシンセサイザーの作成

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

×