Downloaded 11 times
![<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デバイスの接続：コードの解説
● デバイスを列挙する
● メッセージを処理する](https://image.slidesharecdn.com/2015kagoshimahtml5conference-150704063636-lva1-app6892/75/HTML5-Conference-2015-27-2048.jpg)
Uploaded byRyoya Kawai
HTML5 Conference 2015 鹿児島
[セッション中に使ったアプリ] https://ryoyakawai.github.io/html5conference2015/ [HTML5Expert.jpでのチュートリアル] https://html5experts.jp/ryoyakawai/12569/ [ソースコード] https://github.com/ryoyakawai/html5conference2015/
![[Htmlday]present](https://cdn.slidesharecdn.com/ss_thumbnails/htmldaypresent-130607095228-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 Conference 2015 鹿児島
- 1. Web Audio API、Web MIDI API を使ったサウンドプログラミング ヤマハ 株式会社 かわい りょうや
- 2. 個人活動 ● HTML5Experts.jp #55 ●Web Music Developers JP 管理人 かわい りょうや google.com/+RyoyaKawai ヤマハ株式会社 NVPプロジェクト @ryoyakawai 得意技 ● Web Audio API, Web MIDI API ● Polymer (Web Components) ● 大外刈、クロール みでゃっぴー by @g200kg (Unofficial Web MIDI API Mascot)
- 3.
- 4.
- 5. ● API自体 ○ JavaScriptで音そのものを作成＆加工 ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様（W3C） ○ Platform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す ○ モジュール思考（Web Audioでは ”Node”と呼ぶ） 特徴：Web Audio API
- 6. モジュール（Node）思考 ● オシレーター ● オーディオバッファソース ●ゲイン ● フィルター ● ディレイ ● スクリプトプロセッサー ● パン ● コンプレッサー ● コンボルバー ● アナライザー ● ウェーブシェイパー 用意されているNode Node Graph オーディオ バッファソース ディレイゲイン
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. 信号処理：その２：コードの解説 <script type="text/javascript"> var ctx=newAudioContext() || 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.
- 17.
- 18. 信号を扱う：その3：コードの解説 <script type="text/javascript"> var ctx=newAudioContext() || 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 のフィードバック
- 19. Web MIDI API ５DIN(Deutsches Institut Fur Normung)
- 20.
- 21.
- 22. ● API自体 ○ JavaScriptで MIDI 機器と接続ができる ● Web Platformだから受ける特徴 ○ 出どころが確実でOpenな仕様（W3C） ○ APIについてはPlatform依存がない ● API策定の方針 ○ Developer 思考 ○ Native と同等な API を目指す 特徴：Web MIDI API
- 23. Web Audio APIを利用可能なブラウザ iOSMini working on
- 24. 利用可能なブラウザ Google chrome Mac Windows Android Chromebook ● iOSでのWeb MIDIAPI ○ Web MIDI Browser 上で動作します！！ web midi browser ios Opera
- 25. MIDIって？ ● Musical InstrumentDigital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等 MIDI ● Musical Instrument Digital Interface ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等
- 26. 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 メッセージ 約 452, 000件 (0.33秒) 残りのメッセージは検索で！
- 27. <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デバイスの接続：コードの解説 ● デバイスを列挙する ● メッセージを処理する
- 28. “There’s an elementfor that!” ― 1時間前に小松さん曰く Extensible Web
- 29.
- 30. x-webmidi Web MIDI APIのPolymer Element - bower 対応 - 機器のリスト、接続 - 取得メッセージのParse - 16進数は覚える必要なし x-webmidi $ bower install x-webmidi;
- 31.
- 32.
- 33.
- 34. Webブラウザ上に 楽器を作れちゃいました！ Photo by EdChristensen いや、ちょっと待てよ、、、
- 35.
- 36. Photo by Giuliavan Pelt 新しくないなら何か変わるの？
- 37. 標準化されたAPIを持つ Platformが増えた！ Photo by Giuliavan Pelt Web ブラウザ
- 38. ● 標準化された環境 ○ 安心して利用できる ○オープン ● 開発環境 ○ ブラウザ ＆ テキストエディタ ● 言語 ○ Web標準言語（HTML, CSS , JavaScript） ● その他 ○ APIが豊富で進化が速い ○ オープンだから情報が豊富！！ WebというPlatformの特徴
- 39. ● User視点 ○ アプリのインストール不要 ○Nativeと変わらない（まだ制限が多いかも・・・） ● Developer視点 ○ 格段に開発のハードルが下がった（自由化！） ○ モノゴトがオープンに進む ● マーケット ○ イノベーションが起きやすい ○ 進化のスピードもアップ 2つの視点とマーケット
- 40.
- 41. ● 音楽以外の用途 ○ MIDIShow Control(MSC) ■ ステージの照明等の操作 ■ 96台の機材を制御可能 （照明、ビデオ、スモーク、爆発等） 音楽分野外でのMIDIの利用
- 42. 個人的なMIDIへの期待 Machine2Machine Interactive DigitalInterface Musical Instrument Digital Interface
- 43.
- 44. ● Web MusicDevelopers JPに相談だ！！ ○ Google Groups ○ Google+ Web Music Developers JP Web Audio/MIDIで困ったら...
- 45. 日程：7月25日（土） 10:00 -18:00 場所：京都リサーチパーク GDG京都・GDG神戸・Web Music Developers JP 共同開催 Web Music ハッカソン@京都 京都 Web Music Photo by Moyan Brenn goo.gl/juh2E2
- 46.