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 Audio API、 Web MIDI API
を使ったサウンドプログラミング
ヤマハ 株式会社 かわい りょうや
かわい りょうや
google.com/+RyoyaKawai
pepper x VOCALOID
Open Research Forum @KeioWeb Music ハッカソン
Web Audio API
Webブラウザ上で
信号処理を可能にした API
● API自体の特徴
○ JavaScript で音そのものを作成&加工
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様(W3C)
○ APIについてはPlatform依存がない
● API策定の方針
○ De...
モジュール(Node)思考
● オシレーター
● オーディオバッファソース
● ゲイン
● フィルター
● ディレイ
● スクリプトプロセッサー
● パン
● コンプレッサー
● コンボルバー
● アナライザー
● ウェーブシェイパー
用意され...
デ モ
Node Graph
ディレイゲイン
ピッチシフト
変更点
AudioWorker (旧:ScriptProcessor)
● 遅延の軽減を目的
○ worker thread で動作させる
利用可能なブラウザ
Ready! NOT yet...Prepearing!
やってみよう!
● 音量と音階を変える
信号処理:その1
デ モ
音色を変更 = 波形を変える
アナログ シンセサイザー
● 波形を揺らしたり・削ったり・足したり
信号処理:その2
デ モ
信号処理:その2:コードの解説
<script type="text/javascript">
var ctx=new AudioContext() || webkitAudioContect();
var osc0, osc1, lfo, v...
FM シンセサイザー
● 周波数をいじってみる
信号処理:その3
デ モ
信号を扱う:その3:コードの解説
<script type="text/javascript">
var ctx=new AudioContext() || webkitAudioContect();
var mod, car;
mod=ctx...
Web MIDI API
5DIN (Deutsches Institut Fur Normung)
音源モジュール
Webブラウザと
MIDI機器を直接接続する 為のAPI
MIDIコントローラ
● API自体の特徴
○ JavaScript で MIDI 機器と接続ができる
● Web Platformだから受ける特徴
○ 出どころが確実でOpenな仕様(W3C)
○ APIについてはPlatform依存がない
● API策定の方針
...
利用可能なブラウザ
● iOSでのWeb MIDI API
○ Web MIDI Browser 上で動作します!!
web midi browser ios
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...
x-webmidi
3秒でMIDIを使う準備を整えたい!
x-webmidi
WebMIDIのPolymerコンポーネント
- 機器のリスト、入力、出力を行うことが可能。
x-webmidi
やってみよう!
デ モ
アナログ・シンセに接続してみる
FM シンセに接続してみる
デ モ
Webブラウザ上に
楽器を作れちゃいました!
Photo by Ed Christensen
いや、ちょっと待てよ、、、
昔からできたよね?!
<embeded src=”gegege.mid”>
<audio src=”hoho.ogg”>
Photo by Giulia van Pelt
音楽系アプリが動作する
Platformが増えた!
Photo by Giulia van Pelt
● 開発環境
○ ブラウザ(debug 環境付き&実行環境)
○ テキストエディタ
● 言語
○ Web標準言語(HTML, CSS , JavaScript)
○ コンパイルなし!
● その他
○ APIが豊富
○ 進化が速い
○ オープンだ...
● User視点
○ アプリのインストール不要
○ Nativeと変わらない(まだ制限が多いかも・・・)
● Developer視点
○ 開発のハードルが格段に下がった(自由化!)
○ 知識、ノウハウも得やすくなった
● マーケット
○ 音楽以...
まずは触ってみよう!
● Web Music Developers JPに相談だ!!
○ Google Groups
○ Google+
Web Music Developers JP
実装に困ったら...
ご静聴ありがとうございました!
アンケートにご協力お願いします。
http://bit.ly/html5C201501
Upcoming SlideShare
Loading in …5
×

Web Audio API, Web MIDI API - 2015 html5 conference

21,099 views

Published on

スライドの中で使っているアプリケーションのコードです。
https://github.com/ryoyakawai/html5conference2015

Published in: Technology

Web Audio API, Web MIDI API - 2015 html5 conference

  1. 1. Web Audio API、 Web MIDI API を使ったサウンドプログラミング ヤマハ 株式会社 かわい りょうや
  2. 2. かわい りょうや google.com/+RyoyaKawai pepper x VOCALOID Open Research Forum @KeioWeb Music ハッカソン
  3. 3. Web Audio API
  4. 4. Webブラウザ上で 信号処理を可能にした API
  5. 5. ● API自体の特徴 ○ JavaScript で音そのものを作成&加工 ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様(W3C) ○ APIについてはPlatform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す ○ モジュール思考(Web Audioでは ”Node”と呼ぶ) 特徴
  6. 6. モジュール(Node)思考 ● オシレーター ● オーディオバッファソース ● ゲイン ● フィルター ● ディレイ ● スクリプトプロセッサー ● パン ● コンプレッサー ● コンボルバー ● アナライザー ● ウェーブシェイパー 用意されているNode Node Graph オーディオ バッファソース ディレイゲイン
  7. 7. デ モ Node Graph ディレイゲイン ピッチシフト
  8. 8. 変更点 AudioWorker (旧:ScriptProcessor) ● 遅延の軽減を目的 ○ worker thread で動作させる
  9. 9. 利用可能なブラウザ Ready! NOT yet...Prepearing!
  10. 10. やってみよう!
  11. 11. ● 音量と音階を変える 信号処理:その1 デ モ
  12. 12. 音色を変更 = 波形を変える
  13. 13. アナログ シンセサイザー
  14. 14. ● 波形を揺らしたり・削ったり・足したり 信号処理:その2 デ モ
  15. 15. 信号処理:その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):電圧制御フィルタ
  16. 16. FM シンセサイザー
  17. 17. ● 周波数をいじってみる 信号処理:その3 デ モ
  18. 18. 信号を扱う:その3:コードの解説 <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の周波数の比率 ● Carrierのアウトプットレベル ● Carrierのフィードバック
  19. 19. Web MIDI API 5DIN (Deutsches Institut Fur Normung)
  20. 20. 音源モジュール Webブラウザと MIDI機器を直接接続する 為のAPI MIDIコントローラ
  21. 21. ● API自体の特徴 ○ JavaScript で MIDI 機器と接続ができる ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様(W3C) ○ APIについてはPlatform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す 特徴
  22. 22. 利用可能なブラウザ ● iOSでのWeb MIDI API ○ Web MIDI Browser 上で動作します!! web midi browser ios
  23. 23. MIDIって? ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等 MIDI ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等
  24. 24. 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 MIDIメッセージ midi メッセージ 約 487, 000件 (0.37秒) 残りのメッセージは検索で!
  25. 25. <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デバイスの接続:コードの解説 ● デバイスを列挙する ● メッセージを処理する
  26. 26. x-webmidi 3秒でMIDIを使う準備を整えたい!
  27. 27. x-webmidi WebMIDIのPolymerコンポーネント - 機器のリスト、入力、出力を行うことが可能。 x-webmidi
  28. 28. やってみよう!
  29. 29. デ モ アナログ・シンセに接続してみる
  30. 30. FM シンセに接続してみる デ モ
  31. 31. Webブラウザ上に 楽器を作れちゃいました! Photo by Ed Christensen いや、ちょっと待てよ、、、
  32. 32. 昔からできたよね?! <embeded src=”gegege.mid”> <audio src=”hoho.ogg”>
  33. 33. Photo by Giulia van Pelt
  34. 34. 音楽系アプリが動作する Platformが増えた! Photo by Giulia van Pelt
  35. 35. ● 開発環境 ○ ブラウザ(debug 環境付き&実行環境) ○ テキストエディタ ● 言語 ○ Web標準言語(HTML, CSS , JavaScript) ○ コンパイルなし! ● その他 ○ APIが豊富 ○ 進化が速い ○ オープンだから情報が豊富!! WebというPlatformの特徴
  36. 36. ● User視点 ○ アプリのインストール不要 ○ Nativeと変わらない(まだ制限が多いかも・・・) ● Developer視点 ○ 開発のハードルが格段に下がった(自由化!) ○ 知識、ノウハウも得やすくなった ● マーケット ○ 音楽以外の分野との親和性が高まり、イノベー ションが起きやすく、またそのスピードも上る 2つの視点とマーケット
  37. 37. まずは触ってみよう!
  38. 38. ● Web Music Developers JPに相談だ!! ○ Google Groups ○ Google+ Web Music Developers JP 実装に困ったら...
  39. 39. ご静聴ありがとうございました!
  40. 40. アンケートにご協力お願いします。 http://bit.ly/html5C201501

×