Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Music Developers Meetup
@Sapporo
Ryoya KAWAI
● W3C
○ World Wide Web Consocium (USA、France、日本、中国)
○ Webブラウザの仕様を策定している標準化団体
○ 2015年10月時点で会員は405
○ 1994年10月 by Tim Berners...
札幌でMeetupしよう!
活動
● ヤマハに所属、AMEIのメンバー
● HTML5Experts.jp #55
● Web Music Developers JP 管理人
かわい りょうや
google.com/+RyoyaKawai
@ryoyakawai
得意技
...
Web Audio API
Webブラウザ上で
信号処理を可能にした API
すぐにできること
● オシレーター
● オーディオバッファソース
● ゲイン
● フィルター
● ディレイ
● スクリプトプロセッサー
● パン
● コンプレッサー
● コンボルバー
● アナライザー
● ウェーブシェイパー
用意されているNo...
デ モ
Node Graph
ディレイゲイン
ピッチシフト
ブラウザで音って楽しそうでしょ?
― なぜかは分からないけどw
Web Audio APIを利用可能なブラウザ
iOS Mini
出展: http://caniuse.com/#feat=audio-api
2015/10/22 17:08JST
Web MIDI API
5DIN (Deutsches Institut Fur Normung)
ブラウザがMIDIをサポート?
@ITさん
DTM Station:藤本健さん
音源モジュール
Webブラウザと
MIDI機器を直接接続する 為のAPI
MIDIコントローラ
MIDIって?
● Musical Instrument Digital Interface
○ 演奏データを機器間でデジタル転送する規格
■ 物理的な送受信回路
■ インターフェイス
■ プロトコル
■ ファイルフォーマット、等
MIDI
●...
Status Byte (80h-FFh) Data Byte (00h-7Fh)
MIDIメッセージ
● 16進数
● 最低限知ってるとよいメッセージ
○ 音を出力 noteOn 9xh <noteNo> <velocity>
○ 音を停止 ...
<script type="text/javascript">
var midiins=[], midiouts=[];
navigator.requestMIDIAccess.then({sysex:true})(function(acces...
Web MIDI APIを利用可能なブラウザ
iOS Mini
出展: http://caniuse.com/#feat=midi-api
2015/10/22 17:08JST
MIDIデバイス持ってない・・・
● MIDIデバイスなくても遊べますっ!
「MIDIデバイス準備不要、Web MIDI APIの基礎」
HTML5 MIDI 準備不要
Web Audio & Web MIDI
を使ってみよう!
アナログ シンセサイザー
● 波形を揺らしたり・削ったり・足したり
信号処理:その1
デ モ
信号処理:その2:コードの解説
<script type="text/javascript">
var ctx=new AudioContext() || webkitAudioContect();
var osc0, osc1, lfo, v...
FM シンセサイザー
● 周波数をいじってみる
信号処理:その1
デ モ
信号を扱う:その2:コードの解説
<script type="text/javascript">
var ctx=new AudioContext() || webkitAudioContect();
var mod, car;
mod=ctx...
● Offline:Serviceworker
「ブラウザのBackgroundで動作するJS実行環境」
Offlineとかスマホとか!
Illustrated by
Kinyko Yasuda (Google)
http://goo.gl/e...
Webブラウザ上に
楽器を作れちゃいました!
Photo by Ed Christensen
いや、ちょっと待てよ、、、
昔からできたよね?
<audio src=”hoho.ogg”>
<embeded src=”gegege.mid”>
● 標準化された環境
○ W3C
● 開発環境
○ ブラウザ & テキストエディタ
● 言語
○ Web標準言語(HTML, CSS , JavaScript)
● その他
○ APIが豊富&進化が速い
○ オープンだから情報が豊富!!
Web...
まずは触ってみよう!
● Web Music Developers JPに相談だ!!
○ Google Groups
○ Google+
Web Music Developers JP
Web Audio/MIDIで困ったら...
ご静聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

Web musicdevelopersmeetup@sapporo

1,935 views

Published on

Introduction of Web Audio, Web MIDI at Meetup with W3C Audio WG people at Sapporo.

Published in: Technology
  • Be the first to comment

Web musicdevelopersmeetup@sapporo

  1. 1. Web Music Developers Meetup @Sapporo Ryoya KAWAI
  2. 2. ● W3C ○ World Wide Web Consocium (USA、France、日本、中国) ○ Webブラウザの仕様を策定している標準化団体 ○ 2015年10月時点で会員は405 ○ 1994年10月 by Tim Berners-Lee ○ 当初は研究状況、論文を共有する、探す基盤として作られた ● Audio WG ○ Web Audio/MIDI APIを標準化しています ○ 2011年3月25日に設立 ● Technical Plenary / Advisory Committee ○ W3Cの年次集会 ○ 普段は電話会議(AudioWGは隔週にボストンのお昼) ○ 2015年は札幌で開催(明日から) TPAC(てぃーぱっく)って何?
  3. 3. 札幌でMeetupしよう!
  4. 4. 活動 ● ヤマハに所属、AMEIのメンバー ● HTML5Experts.jp #55 ● Web Music Developers JP 管理人 かわい りょうや google.com/+RyoyaKawai @ryoyakawai 得意技 ● Web Audio API, Web MIDI API ● Polymer (Web Components) ● 大外刈、クロール みでゃっぴー by @g200kg (Unofficial Web MIDI API Mascot)
  5. 5. Web Audio API
  6. 6. Webブラウザ上で 信号処理を可能にした API
  7. 7. すぐにできること ● オシレーター ● オーディオバッファソース ● ゲイン ● フィルター ● ディレイ ● スクリプトプロセッサー ● パン ● コンプレッサー ● コンボルバー ● アナライザー ● ウェーブシェイパー 用意されているNode Node Graph オーディオ バッファソース ディレイゲイン
  8. 8. デ モ Node Graph ディレイゲイン ピッチシフト
  9. 9. ブラウザで音って楽しそうでしょ? ― なぜかは分からないけどw
  10. 10. Web Audio APIを利用可能なブラウザ iOS Mini 出展: http://caniuse.com/#feat=audio-api 2015/10/22 17:08JST
  11. 11. Web MIDI API 5DIN (Deutsches Institut Fur Normung)
  12. 12. ブラウザがMIDIをサポート? @ITさん DTM Station:藤本健さん
  13. 13. 音源モジュール Webブラウザと MIDI機器を直接接続する 為のAPI MIDIコントローラ
  14. 14. MIDIって? ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等 MIDI ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等
  15. 15. Status Byte (80h-FFh) Data Byte (00h-7Fh) MIDIメッセージ ● 16進数 ● 最低限知ってるとよいメッセージ ○ 音を出力 noteOn 9xh <noteNo> <velocity> ○ 音を停止 noteOff 8xh <noteNo> <velocity> ○ 音色変更 programChange Cxh <no> ○ SysEx System Exclusive 0xF0 … 0x7F 約 452, 000件 (0.33秒) 残りのメッセージは検索で! midi メッセージ
  16. 16. <script type="text/javascript"> var midiins=[], midiouts=[]; navigator.requestMIDIAccess.then({sysex:true})(function(access) { var inputIterator=access.inputs.values(); for(var o=inputIterator.next(); !o.done; o=inputIterator.next()) { midiins.push(o.value); } var outputIterator=access.outputs.values(); for(var o=outputIterator.next(); !o.done; o=outputIterator.next()) { midiouts.push(o.value); } }, function(msg){ console.log(msg);}); </script> <script type="text/javascript"> midiins[0].onmidimessage=function(event) { console.log(event.data); } midiouts[0].send([0x90, 0x55, 0x7f], 0); </script> MIDIデバイスの接続 ● デバイスを列挙する ● メッセージを処理する
  17. 17. Web MIDI APIを利用可能なブラウザ iOS Mini 出展: http://caniuse.com/#feat=midi-api 2015/10/22 17:08JST
  18. 18. MIDIデバイス持ってない・・・ ● MIDIデバイスなくても遊べますっ! 「MIDIデバイス準備不要、Web MIDI APIの基礎」 HTML5 MIDI 準備不要
  19. 19. Web Audio & Web MIDI を使ってみよう!
  20. 20. アナログ シンセサイザー
  21. 21. ● 波形を揺らしたり・削ったり・足したり 信号処理:その1 デ モ
  22. 22. 信号処理:その2:コードの解説 <script type="text/javascript"> var ctx=new AudioContext() || webkitAudioContect(); var osc0, osc1, lfo, vcf; osc0=ctx.createOscillator(), osc1=ctx.createOscillator(); lfo=ctx.createOscillator(); vcf=ctx.createBiquadFilter(); osc0.connect(vcf); osc1.connect(vcf); lfo.connect(osc0.frequency); lfo.connect(osc1.frequency); lfo.connect(vcf.detune); vco0.start(0), vco1.start(0); lfo.start(0); </script> ● VCO(Voltage Controlled Oscillator):発振機 ● LFO(Low Frequency Oscillator):低周波発振機 ● VCF(Voltage Controlled Filter):電圧制御フィルタ
  23. 23. FM シンセサイザー
  24. 24. ● 周波数をいじってみる 信号処理:その1 デ モ
  25. 25. 信号を扱う:その2:コードの解説 <script type="text/javascript"> var ctx=new AudioContext() || webkitAudioContect(); var mod, car; mod=ctx.createOscillator(), car=ctx.createOscillator(); mod.connect(car.frequency); mod.start(0), car.start(0); </script> 音色は以下の3つで決定 ● Carrier、Modulator の周波数の比率 ● Modulator のアウトプットレベル ● Moduator のフィードバック
  26. 26. ● Offline:Serviceworker 「ブラウザのBackgroundで動作するJS実行環境」 Offlineとかスマホとか! Illustrated by Kinyko Yasuda (Google) http://goo.gl/eQgEC7 ● アイコンから起動:Web App manifest ○ 動作時の向き、Splash等を制御可能 デモ1 デモ2 Camera
  27. 27. Webブラウザ上に 楽器を作れちゃいました! Photo by Ed Christensen いや、ちょっと待てよ、、、
  28. 28. 昔からできたよね? <audio src=”hoho.ogg”> <embeded src=”gegege.mid”>
  29. 29. ● 標準化された環境 ○ W3C ● 開発環境 ○ ブラウザ & テキストエディタ ● 言語 ○ Web標準言語(HTML, CSS , JavaScript) ● その他 ○ APIが豊富&進化が速い ○ オープンだから情報が豊富!! WebというPlatformの特徴
  30. 30. まずは触ってみよう!
  31. 31. ● Web Music Developers JPに相談だ!! ○ Google Groups ○ Google+ Web Music Developers JP Web Audio/MIDIで困ったら...
  32. 32. ご静聴ありがとうございました!

×