「AudioとガジェットをWebで遊ぶ」と題してHTML5 Conference 2016 @Tokyo でお話した、Web Audio API, Web MIDI API, Web Bluetoothのスライドです。

1. AudioとガジェットをWebで遊ぶ
- Web Audio/MIDI, Web Bluetooth -
Yamaha Corporation of America
Ryoya Kawai

2. HTML5な活動
● HTML5Experts.jp #55
● Web Music Developers JP 管理人
Ryoya Kawai
google.com/+RyoyaKawai
Yamaha Corporation of America
@ryoyakawai
得意技
● Web Audio/MIDI API
● Polymer (Web Components)
● Web Bluetooth はじめました
みでゃっぴー by @g200kg
(W3C Unofficial Web MIDI API Mascot)
本日のコードはこちら：
https://goo.gl/kBoRzZ

3. 25年の変遷
Source: https://goo.gl/MZu72XWebGL

4. Sound!

5. Web Audio API

6. Webブラウザ上で
信号処理を可能にした API

7. Audio Graph
● オシレーター
● オーディオバッファソース
● ゲイン
● フィルター
● ディレイ
● AudioWorklet
(現：ScriptProcessor)
● パン
● コンプレッサー
● コンボルバー
● アナライザー
● ウェーブシェイパー
予め用意されているNode（最小単位）
Audio Graph
オーディオ
バッファソース
ディレイゲイン

8. Delay
Demo : /webaudiomidi/delay/
オーディオ
バッファソース
ディレイゲイン
ゲイン

9. Demo : /webaudiomidi/pitch/js/app.js
ゲイン ディレイ
ピッチシフト
Pitch Shift

10. Pitch Shift
Eventhandler
AudioWorker
AudioWorklet
↑ｲﾏｺｺ
/webaudiomidi/pitch/js/pitchshifter.js

11. Web Audio APIを利用可能なブラウザ
iOS Mini
Source: caniuse.com
2016/8/23

12. 応 用 例

13. FM シンセサイザー
Develope by @takmiz
アナログ シンセサイザー
https://goo.gl/ODtD8n

14. Web MIDI API

15. ● Musical Instrument Digital Interface （公開：1982年10月）
○ 演奏データを機器間でデジタル転送する規格
■ 物理的な送受信回路
■ インターフェイス
■ プロトコル
■ ファイルフォーマット、等
MIDI
MIDIとは

16. ● 8ビットのメッセージの集合
● 16進数
● 16チャンネル
● 0〜127で数値を表現
MIDIメッセージ
midi メッセージ
Demo : /webaudiomidi/midimsgv/

17. コードの説明
/webaudiomidi/webmidi/index.html

18. Web MIDI APIを利用可能なブラウザ
iOS Mini
Source: caniuse.com
2016/8/23

19. Soundmondo
soundmondo.com
Voice
Params
Voice
Params
Voice Params
Web MIDI APIを使ったシンセサイザー用音色共有サイト
Web Components
使ってます。

20. madeon (EDM Artist in France)
https://www.madeon.fr/adventuremachine/

21. Web Music ハッカソン #5 (2016/7/30)
コミュニティ主催のハッカソンからの作品の紹介
ご紹介 : http://goo.gl/IplIq5

22. Web MIDI API Arduino
(w/ Moco for LUFA)
MIDI
Web MIDI API と DIY
Codelabs：
Arduino UNOをUSB MIDI化
DIYで使うなら改善したい点
● 手順がHacky
● 有線・・・
● デバッグが・・・
● Resolutionが・・・
● In/Outが別々

23. MIDIがBluetoothに対応（Bluetooth MIDI）
over
Demo : /webaudiomidi/fmsynth/
DIYで使うなら改善したい点
● 手順がHacky
● 有線・・・
● デバッグが・・・
● Resolutionが・・・
● In/Outが別々

24. ArduinoがBluetooth化（Arduino 101）
Demo : /webaudiomidi/blemidicon/
Intel社製のCurieを搭載
● 6軸加速度センサ
● ジャイロセンサ
● Bluetooth LE (Bluetooth Smart)
DIYで使うなら改善したい点
● 手順がHacky
● 有線・・・
● デバッグが・・・
● Resolutionが・・・
● In/Outが別々
TinyTILE
Arduino 101 互換ボード
（Comming soon?）

25. Web Bluetooth

26. Wi-FiとBluetoothの特徴
● ネットワーク的なつながり
● 設定が必要
● ルータ経由で繋がる
● 近距離のつながり
● 範囲内ならだいたい繋がる
● 直接繋がる

27. 直接繋がる
デモ：PLAY BULB candle
Demo, Codelab

28. Bluetoothの種類、接続手順
● 種類
○ Central：探索する側（スマホ、PC等）
○ Peripheral：探索される側（心拍センサ、ビーコン等）
● 接続シーケンス
接続するね。
Serverはこれ。
△◯Serviceを取得させて。
△◯Serviceはこれ。
☓◯を読むね。
Central Peripheral

29. コードの説明
/webbluetooth/candymagic/index.html
開始にはユーザーのインタラクションが必須
UUIDは小文字で

30. Web Bluetooth と Arduino 101 でデモ
地球グルグル Candy Magic
/webbluetooth/eearthgrugru/ /webbluetooth/candymagic/
（Peripheral → Central） （Peripheral ← Central）

31. 唐突ですが、HTML5 Conference なので！

32. Progressive Web APP
NativeアプリのようなUXを提供するWebアプリ
含まれる技術要素
● Service Worker
● Add to Home Screen
● App Manifest
● Background Sync 等
積極的に使いましょう！
● NativeアプリのようなUXを提供したい
● 必ずしもネットワーク必要としないアプリが多い
● 使いたい場所にネット、携帯が利用可能とは限らない
Progressive Web APP

33. Progressive Web APP 実装してます！
以下の動作が確認可能です！
● Offlineでの動作
● Add to Home Screen
詳細はえーじさんのセッションで！
@ ルームA（1F）

34. まとめ
Web Audio API
● ブラウザで信号処理
Web MIDI API
● ブラウザと外部MIDIデバイスが直接つながる
● Bluetooth MIDIを使えば無線にできる
Web Bluetooth
● Bluetooth LE機器が接続可能
● Arduino 101 を使えばオリジナル機器の作成が可能
Progressive Web APP
● 是非使いましょう！！
本日のコード
https://goo.gl/kBoRzZ

35. Enjoy Hacking !
ご清聴ありがとうございました！