Suche senden
Hochladen
Web Audio APIでシンセサイザーの作成
•
Als PPTX, PDF herunterladen
•
7 gefällt mir
•
2,605 views
aike
Folgen
DevFestX Sapporo 2012
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 27
Jetzt herunterladen
Empfohlen
RubyGemsでわるふざけ
RubyGemsでわるふざけ
Hiromu Shioya
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
Ryo Koizumi
Sinatra and heroku for mac
Sinatra and heroku for mac
Naoyuki Mitsuboshi
Itcamp長崎2012 capistrano
Itcamp長崎2012 capistrano
kumachang_LL
サーバ構築実践入門
サーバ構築実践入門
優之 田中
Coffee script初めの一歩
Coffee script初めの一歩
Misa Kondo
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
AmadeusSVX
Web based 3D video streaming system “Depstreamer(仮)”
Web based 3D video streaming system “Depstreamer(仮)”
AmadeusSVX
Empfohlen
RubyGemsでわるふざけ
RubyGemsでわるふざけ
Hiromu Shioya
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
WebAudio APIでブラウザ上で動くDJアプリケーションは作れるか? (WebAudio API アプリケーション作成入門)
Ryo Koizumi
Sinatra and heroku for mac
Sinatra and heroku for mac
Naoyuki Mitsuboshi
Itcamp長崎2012 capistrano
Itcamp長崎2012 capistrano
kumachang_LL
サーバ構築実践入門
サーバ構築実践入門
優之 田中
Coffee script初めの一歩
Coffee script初めの一歩
Misa Kondo
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
AmadeusSVX
Web based 3D video streaming system “Depstreamer(仮)”
Web based 3D video streaming system “Depstreamer(仮)”
AmadeusSVX
Practical Web Audio API Programming
Practical Web Audio API Programming
aike
FM音源をいじれるWebサービスを作った
FM音源をいじれるWebサービスを作った
CHY72
Web socketドロンくん その後-
Web socketドロンくん その後-
Yuuichi Akagawa
自作ウェブ楽器の紹介
自作ウェブ楽器の紹介
aike
Web制作のアレコレ
Web制作のアレコレ
regret raym
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
AngularとWeb Audio APIはじめてみました
AngularとWeb Audio APIはじめてみました
pastelInc
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
Kensaku Komatsu
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
Web Audio APIで作る各種ウェブ楽器
Web Audio APIで作る各種ウェブ楽器
aike
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
Kazuyuki Honda
Assembly Tanka on Web - Aiko Kenji
Assembly Tanka on Web - Aiko Kenji
asmtanka
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
6th oct2012 kobeit_webintents
6th oct2012 kobeit_webintents
Kensaku Komatsu
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Ryoya Kawai
SocketStream入門
SocketStream入門
Kohei Kadowaki
What's Sketch.app
What's Sketch.app
littlebustersreply
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
Web Audio APIの初歩
Web Audio APIの初歩
Shota Kubota
もうひとつのNo sql couchdbとは
もうひとつのNo sql couchdbとは
Koji Kawamura
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Weitere ähnliche Inhalte
Ähnlich wie Web Audio APIでシンセサイザーの作成
Practical Web Audio API Programming
Practical Web Audio API Programming
aike
FM音源をいじれるWebサービスを作った
FM音源をいじれるWebサービスを作った
CHY72
Web socketドロンくん その後-
Web socketドロンくん その後-
Yuuichi Akagawa
自作ウェブ楽器の紹介
自作ウェブ楽器の紹介
aike
Web制作のアレコレ
Web制作のアレコレ
regret raym
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
AngularとWeb Audio APIはじめてみました
AngularとWeb Audio APIはじめてみました
pastelInc
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
Kensaku Komatsu
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
Web Audio APIで作る各種ウェブ楽器
Web Audio APIで作る各種ウェブ楽器
aike
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
Kazuyuki Honda
Assembly Tanka on Web - Aiko Kenji
Assembly Tanka on Web - Aiko Kenji
asmtanka
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
6th oct2012 kobeit_webintents
6th oct2012 kobeit_webintents
Kensaku Komatsu
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Ryoya Kawai
SocketStream入門
SocketStream入門
Kohei Kadowaki
What's Sketch.app
What's Sketch.app
littlebustersreply
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
Web Audio APIの初歩
Web Audio APIの初歩
Shota Kubota
もうひとつのNo sql couchdbとは
もうひとつのNo sql couchdbとは
Koji Kawamura
Ähnlich wie Web Audio APIでシンセサイザーの作成
(20)
Practical Web Audio API Programming
Practical Web Audio API Programming
FM音源をいじれるWebサービスを作った
FM音源をいじれるWebサービスを作った
Web socketドロンくん その後-
Web socketドロンくん その後-
自作ウェブ楽器の紹介
自作ウェブ楽器の紹介
Web制作のアレコレ
Web制作のアレコレ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
AngularとWeb Audio APIはじめてみました
AngularとWeb Audio APIはじめてみました
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
HTML5 & The Web Platform
HTML5 & The Web Platform
Web Audio APIで作る各種ウェブ楽器
Web Audio APIで作る各種ウェブ楽器
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
Assembly Tanka on Web - Aiko Kenji
Assembly Tanka on Web - Aiko Kenji
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
6th oct2012 kobeit_webintents
6th oct2012 kobeit_webintents
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
SocketStream入門
SocketStream入門
What's Sketch.app
What's Sketch.app
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Web Audio APIの初歩
Web Audio APIの初歩
もうひとつのNo sql couchdbとは
もうひとつのNo sql couchdbとは
Kürzlich hochgeladen
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Kürzlich hochgeladen
(8)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
Web Audio APIでシンセサイザーの作成
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.
その 秘密は
10.
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/
Jetzt herunterladen