AudioとガジェットをWebで遊ぶ - Web Audio/MIDI, Web Bluetooth - Yamaha Corporation of America Ryoya Kawai
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 !
ご清聴ありがとうございました!