Web Music Developers Meetup #3 https://gyazo.com/1a7aec2174f1086418bfed1904c05cc0
@ 東京オペラシティ 41F デジタルハーツ
実況ページ by satake.icon
解説ブログ by @ryoyakawai
2. 最近のWeb Audio/MIDI
ChromeのWebMIDI開発者
W3C TPAC 2018 / Audio WGとは
W3C: Webの仕様を議論する会議
Audio WG: Web Audio /MIDI の議論をする作業班
決まったこと
WebAudio v1 CR/PR プラン
WebAudio v2 プラン
WebMIDI v1 CR プラン
Audio Community Group 設立
WebAudio v1 CR/PR プラン
来年早期にChromeに続きFIrefoxが実装完了
現状の仕様でv1は確定
WebAudio v2 プラン
低レベルAPIに注力
やらないこと
新しい高機能AudioNodeは追加しない
Plugins機構の検討は行わない
やること
WebRTC / WebXRとの連携
ハイエンドゲーム向け (WebAssembly)
v2 具体的なプラン
AudioDeviceClient API
オーディオ入出力デバイスの列挙
各デバイスに対して
再生録音フォーマットの指定
コールバックによる利用
AudioDataAPIのようなもの
昔Firefoxが作ってたのに…
WebAudio v1 CR/PR プラン
Firefoxが正式に対応予定を公言
セキュリティ問題も内部で議論済み
PermissionsAPIやFeaturePolicyとの連携も同時進行
来年早期に出てきそう
2つ目の実装が揃うので来年はCR化
Audio Community Group 設立
WGで議論する際の問題点
ブラウザベンダ主導になりがち
高レベルAPIの議論が難しい状況に
WebAudiov2以降に向けて
W3Cメンバ以外も参加できる
Chrome Web MIDI 近況
実装内部のデザイン変更 (Mojo Service化)
Chrome72から内部連携の仕組みが一新
機能的な変更は無い
エッジケースでクラッシュするかも
なにか気付いたら@toyoshimまで!
SysExなしでもパーミッションが必要になる
Firefoxも常時パーミッションを求める予定
HTTPから利用不可になっちゃう
ChromeExtensions / Appsは適用外
localhostも大丈夫
fileはだめ
Chrome73から警告表示、74から実施予定
3. WebMIDIAPIさわってみた
MIDIをWebSocketに乗せるアプリを作ってみた
ライブラリ
djipco/webmidi
gorilla/websocket
GoのWebSocketクライアント
使用ツール
websockets/wscat
curlぽくコンソールからWebSocketにメッセージを流せる
デバッグで使用
mohayonao/virtual-midi-keyboard
仮想MIDI端末
今後
チャット的にチャンネル作りたい
Redis Pub/Subでスケール
polyfillでIE対応
Jazz-Pluginというのがあるらしい
CloudFrontで受ける
譜読みゲームを作ってみた
vexflowで表示した楽譜をMIDIキーの入力で答え合わせ
ライブラリ
React
WebMIDI
vexflow
今後
教育用コンテンツにしたい
音ゲー作ってみたい
CreatorsHubを使うとよさそう by @toyoshim
OSCを使うとよさそう by @ryoyakawai
by satake.icon
5. BLE-MIDI via WebBluetooth / SweetHome3DのモデリングデータをWebMIDIでグリグリした話
Roland / AMEI
電子サックスの開発してる
BLE-MIDI via WebBluetooth
BLEでMIDIを送受信する
WebBluetoothをつかう
WebMIDIAPIを経由しないので、16進のメッセージを直接JSでパースする
SweetHome3DのモデリングデータをWebMIDIでグリグリした話
SweetHome3D → objで書き出し → threejsでロード → WebMIDI
家のモデルがVJになってる!すごい!satake.icon*3
6. センサーをブラウザにつないであそびたい
USB-MIDIでセンサをブラウザに直結する!
センサを無理矢理MIDIデバイスにする
Arduino + MocoLUFAを使うのが簡単
サーモグラフィーのデータをビジュアライズするアプリを作った
7.
hls.jsにコミットしてる
MediaElementAudioSourceNode
AudioElement/VideoElementからオーディオデータを取得してWebAudioAPIで処理するためのAPI
高機能なオーディオ処理機能を提供する
動画で使えるイコライザアプリを作った
VideoElementにイコライザとスペクトルの描画機能を付ける
ストリーミング動画でも使える
MediaElementAudioSourceNode
BiauadFilterNode
AnalyserNode + Canvas
ストリーミング
HLS
Appleのストリーミングプロトコル
Safaliはネイティブでサポート
Webサーバで配信可能
動画の実体となるセグメントファイル (MPEG2 TS) とプレイリスト (m3u8) で構成される
MPEG-DASH
ISOで規格化されたプロトコル
ネイティブでサポートするブラウザは無い
MPDファイルがプレイリストファイルとなる
Fragmented MP4 of MPEG2 TS