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.

AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -

0 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -

  1. 1. AudioとガジェットをWebで遊ぶ - Web Audio/MIDI, Web Bluetooth - Yamaha Corporation of America Ryoya Kawai
  2. 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. 3. 25年の変遷 Source: https://goo.gl/MZu72XWebGL
  4. 4. Sound!
  5. 5. Web Audio API
  6. 6. Webブラウザ上で 信号処理を可能にした API
  7. 7. Audio Graph ● オシレーター ● オーディオバッファソース ● ゲイン ● フィルター ● ディレイ ● AudioWorklet (現:ScriptProcessor) ● パン ● コンプレッサー ● コンボルバー ● アナライザー ● ウェーブシェイパー 予め用意されているNode(最小単位) Audio Graph オーディオ バッファソース ディレイゲイン
  8. 8. Delay Demo : /webaudiomidi/delay/ オーディオ バッファソース ディレイゲイン ゲイン
  9. 9. Demo : /webaudiomidi/pitch/js/app.js ゲイン ディレイ ピッチシフト Pitch Shift
  10. 10. Pitch Shift Eventhandler AudioWorker AudioWorklet ↑イマココ /webaudiomidi/pitch/js/pitchshifter.js
  11. 11. Web Audio APIを利用可能なブラウザ iOS Mini Source: caniuse.com 2016/8/23
  12. 12. 応 用 例
  13. 13. FM シンセサイザー Develope by @takmiz アナログ シンセサイザー https://goo.gl/ODtD8n
  14. 14. Web MIDI API
  15. 15. ● Musical Instrument Digital Interface (公開:1982年10月) ○ 演奏データを機器間でデジタル転送する規格 ■ 物理的な送受信回路 ■ インターフェイス ■ プロトコル ■ ファイルフォーマット、等 MIDI MIDIとは
  16. 16. ● 8ビットのメッセージの集合 ● 16進数 ● 16チャンネル ● 0〜127で数値を表現 MIDIメッセージ midi メッセージ Demo : /webaudiomidi/midimsgv/
  17. 17. コードの説明 /webaudiomidi/webmidi/index.html
  18. 18. Web MIDI APIを利用可能なブラウザ iOS Mini Source: caniuse.com 2016/8/23
  19. 19. Soundmondo soundmondo.com Voice Params Voice Params Voice Params Web MIDI APIを使ったシンセサイザー用音色共有サイト Web Components 使ってます。
  20. 20. madeon (EDM Artist in France) https://www.madeon.fr/adventuremachine/
  21. 21. Web Music ハッカソン #5 (2016/7/30) コミュニティ主催のハッカソンからの作品の紹介 ご紹介 : http://goo.gl/IplIq5
  22. 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. 23. MIDIがBluetoothに対応(Bluetooth MIDI) over Demo : /webaudiomidi/fmsynth/ DIYで使うなら改善したい点 ● 手順がHacky ● 有線・・・ ● デバッグが・・・ ● Resolutionが・・・ ● In/Outが別々
  24. 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. 25. Web Bluetooth
  26. 26. Wi-FiとBluetoothの特徴 ● ネットワーク的なつながり ● 設定が必要 ● ルータ経由で繋がる ● 近距離のつながり ● 範囲内ならだいたい繋がる ● 直接繋がる
  27. 27. 直接繋がる デモ:PLAY BULB candle Demo, Codelab
  28. 28. Bluetoothの種類、接続手順 ● 種類 ○ Central:探索する側(スマホ、PC等) ○ Peripheral:探索される側(心拍センサ、ビーコン等) ● 接続シーケンス 接続するね。 Serverはこれ。 △◯Serviceを取得させて。 △◯Serviceはこれ。 ☓◯を読むね。 Central Peripheral
  29. 29. コードの説明 /webbluetooth/candymagic/index.html 開始にはユーザーのインタラクションが必須 UUIDは小文字で
  30. 30. Web Bluetooth と Arduino 101 でデモ 地球グルグル Candy Magic /webbluetooth/eearthgrugru/ /webbluetooth/candymagic/ (Peripheral → Central) (Peripheral ← Central)
  31. 31. 唐突ですが、HTML5 Conference なので!
  32. 32. Progressive Web APP NativeアプリのようなUXを提供するWebアプリ 含まれる技術要素 ● Service Worker ● Add to Home Screen ● App Manifest ● Background Sync 等 積極的に使いましょう! ● NativeアプリのようなUXを提供したい ● 必ずしもネットワーク必要としないアプリが多い ● 使いたい場所にネット、携帯が利用可能とは限らない Progressive Web APP
  33. 33. Progressive Web APP 実装してます! 以下の動作が確認可能です! ● Offlineでの動作 ● Add to Home Screen 詳細はえーじさんのセッションで! @ ルームA(1F)
  34. 34. まとめ Web Audio API ● ブラウザで信号処理 Web MIDI API ● ブラウザと外部MIDIデバイスが直接つながる ● Bluetooth MIDIを使えば無線にできる Web Bluetooth ● Bluetooth LE機器が接続可能 ● Arduino 101 を使えばオリジナル機器の作成が可能 Progressive Web APP ● 是非使いましょう!! 本日のコード https://goo.gl/kBoRzZ
  35. 35. Enjoy Hacking ! ご清聴ありがとうございました!

×