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

Yamaha Corporation of AmericaRyoya Kawai

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

25年の変遷

Source: https://goo.gl/MZu72X WebGL

Sound!

Web Audio API

Webブラウザ上で

信号処理を可能にした API

Audio Graph

● オシレーター

● オーディオバッファソース

● ゲイン

● フィルター

● ディレイ

● AudioWorklet (現：ScriptProcessor)

● パン

● コンプレッサー

● コンボルバー

● アナライザー

● ウェーブシェイパー

予め用意されているNode（最小単位）

Audio Graph

オーディオバッファソース

ディレイゲイン

Delay

Demo : /webaudiomidi/delay/

オーディオバッファソース

ディレイゲイン

ゲイン

Demo : /webaudiomidi/pitch/js/app.js

ゲイン ディレイ

ピッチシフトPitch Shift

Pitch Shift

Eventhandler

AudioWorker

AudioWorklet↑ｲﾏｺｺ

/webaudiomidi/pitch/js/pitchshifter.js

Web Audio APIを利用可能なブラウザ

iOS Mini

Source: caniuse.com 2016/8/23

応 用 例

FM シンセサイザー

Develope by @takmiz

アナログ シンセサイザー

https://goo.gl/ODtD8n

Web MIDI API

● Musical Instrument Digital Interface （公開：1982年10月）

○ 演奏データを機器間でデジタル転送する規格

■ 物理的な送受信回路

■ インターフェイス

■ プロトコル ■ ファイルフォーマット、等

MIDI

MIDIとは

● 8ビットのメッセージの集合

● 16進数

● 16チャンネル

● 0〜127で数値を表現

MIDIメッセージ

midi メッセージ

Demo : /webaudiomidi/midimsgv/

コードの説明

/webaudiomidi/webmidi/index.html

Web MIDI APIを利用可能なブラウザ

iOS Mini

Source: caniuse.com 2016/8/23

Soundmondo

soundmondo.com

Voice Params

Voice Params

Voice Params

Web MIDI APIを使ったシンセサイザー用音色共有サイト

Web Components 使ってます。

madeon (EDM Artist in France)

https://www.madeon.fr/adventuremachine/

Web Music ハッカソン #5 (2016/7/30)

コミュニティ主催のハッカソンからの作品の紹介

ご紹介 : http://goo.gl/IplIq5

Web MIDI API Arduino(w/ Moco for LUFA)

MIDI

Web MIDI API と DIY

Codelabs： Arduino UNOをUSB MIDI化

DIYで使うなら改善したい点

● 手順がHacky● 有線・・・

● デバッグが・・・

● Resolutionが・・・

● In/Outが別々

MIDIがBluetoothに対応（Bluetooth MIDI）

over

Demo : /webaudiomidi/fmsynth/

DIYで使うなら改善したい点● 手順がHacky● 有線・・・

● デバッグが・・・

● Resolutionが・・・

● In/Outが別々

ArduinoがBluetooth化（Arduino 101）

Demo : /webaudiomidi/blemidicon/

Intel社製のCurieを搭載● 6軸加速度センサ

● ジャイロセンサ

● Bluetooth LE (Bluetooth Smart)

DIYで使うなら改善したい点● 手順がHacky● 有線・・・

● デバッグが・・・

● Resolutionが・・・

● In/Outが別々

TinyTILEArduino 101 互換ボード

（Comming soon?）

Web Bluetooth

Wi-FiとBluetoothの特徴

● ネットワーク的なつながり

● 設定が必要

● ルータ経由で繋がる

● 近距離のつながり

● 範囲内ならだいたい繋がる

● 直接繋がる

直接繋がる

デモ：PLAY BULB candle

Demo, Codelab

Bluetoothの種類、接続手順

● 種類○ Central：探索する側（スマホ、PC等）

○ Peripheral：探索される側（心拍センサ、ビーコン等）

● 接続シーケンス

接続するね。

Serverはこれ。

△◯Serviceを取得させて。

△◯Serviceはこれ。

☓◯を読むね。

Central Peripheral

コードの説明/webbluetooth/candymagic/index.html

開始にはユーザーのインタラクションが必須

UUIDは小文字で

Web Bluetooth と Arduino 101 でデモ

地球グルグル Candy Magic/webbluetooth/eearthgrugru/ /webbluetooth/candymagic/

（Peripheral → Central） （Peripheral ← Central）

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

Progressive Web APP

NativeアプリのようなUXを提供するWebアプリ

含まれる技術要素● Service Worker● Add to Home Screen● App Manifest● Background Sync 等

積極的に使いましょう！● NativeアプリのようなUXを提供したい

● 必ずしもネットワーク必要としないアプリが多い

● 使いたい場所にネット、携帯が利用可能とは限らない

Progressive Web APP

Progressive Web APP 実装してます！

以下の動作が確認可能です！● Offlineでの動作● Add to Home Screen

詳細はえーじさんのセッションで！

@ ルームA（1F）

まとめWeb Audio API● ブラウザで信号処理

Web MIDI API● ブラウザと外部MIDIデバイスが直接つながる

● Bluetooth MIDIを使えば無線にできる

Web Bluetooth● Bluetooth LE機器が接続可能

● Arduino 101 を使えばオリジナル機器の作成が可能

Progressive Web APP● 是非使いましょう！！

本日のコード https://goo.gl/kBoRzZ

Enjoy Hacking !

ご清聴ありがとうございました！