Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

Web Audio API, Web MIDI API - 2015 html5 conference

25.464 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

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

×