SlideShare a Scribd company logo
Web MIDI meets DIY #0
イントロ
2015/09/04 @VilingVPインキュベーションオフィス
かわい りょうや
Web Music Developers JP 管理人
・Web Music ハッカソンやってます!
google.com/+RyoyaKawai
@ryoyakawai
では、さっそく・・・
MIDIって知ってますか?
Wikipedia によると...
出展:Wikipedia 2015/09/03 15:40
電子楽器の演奏データを
機器間でデジタル転送!!!
Photo by Humusak ( pixabay: https://goo.gl/Yr0vC1 )
続いて・・・
Web MIDIって知ってますか?
おいしいの?
ブラウザがUSB-MIDI※
に対応しました!!!
※ Universal Serial Bus Device Class Definition for MIDI Devices
MIDI
MIDIデイバイス Webブラウザ
こんな感じ
一言で説明すると・・・
ブラウザは楽器です
Google Chromeは楽器です
出展: DTM Station 2015年06月09日11:00
MIDI
MIDIデイバイス Webブラウザ
もう一度
でも、難しいんでしょ?
いぇいぇ、簡単ですよ!
CodeLab: x-webmidi
https://goo.gl/8d7Qck
MIDIデバイス持ってない・・・
デバイスなくても試せます!
デ モ
http://goo.gl/pAI1Qs
https://html5experts.jp/
実装方法の詳細はHTML5 Experts.jpで掲載予定!!
どうやってるの?
Web MIDI Link
by @g200kg
Polymer
Web MIDI API : Output
KeyCode
Web MIDI API : Input
Polymer
超お手軽!
MIDI対応Webアプリ開発
そしたらやっぱり・・・
ハードウェアも自作で作りたい!
ユースケースが・・・
MFT2015にあった!!
@wks さん
@tadfmac さん
そこで、
「Web MIDI meets DIY」
が企画されたのでした。
どんな作品かのご紹介をお願いします!

More Related Content

Viewers also liked

Kpt×ナース(公開版)
Kpt×ナース(公開版)Kpt×ナース(公開版)
Kpt×ナース(公開版)Noriyuki Nemoto
 
バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1
バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1
バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1Hirotaka Kawata
 
LLVM最適化のこつ
LLVM最適化のこつLLVM最適化のこつ
LLVM最適化のこつ
MITSUNARI Shigeo
 
Zynq + Vivado HLS入門
Zynq + Vivado HLS入門Zynq + Vivado HLS入門
Zynq + Vivado HLS入門
narusugimoto
 
KPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだこと
KPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだことKPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだこと
KPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだこと
ESM SEC
 
ゼロから始める自作 CPU 入門
ゼロから始める自作 CPU 入門ゼロから始める自作 CPU 入門
ゼロから始める自作 CPU 入門
Hirotaka Kawata
 
レッツゴーディベロッパーX 2014
レッツゴーディベロッパーX 2014レッツゴーディベロッパーX 2014
レッツゴーディベロッパーX 2014
Noriyuki Nemoto
 
KPT採集
KPT採集KPT採集
KPT採集
Noriyuki Nemoto
 
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
Hirotaka Kawata
 
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
Fumitaka Inayama
 

Viewers also liked (10)

Kpt×ナース(公開版)
Kpt×ナース(公開版)Kpt×ナース(公開版)
Kpt×ナース(公開版)
 
バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1
バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1
バイナリより低レイヤな話 (プロセッサの心を読み解く) - カーネル/VM探検隊@北陸1
 
LLVM最適化のこつ
LLVM最適化のこつLLVM最適化のこつ
LLVM最適化のこつ
 
Zynq + Vivado HLS入門
Zynq + Vivado HLS入門Zynq + Vivado HLS入門
Zynq + Vivado HLS入門
 
KPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだこと
KPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだことKPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだこと
KPTの理論と実践 公開用 プロジェクトへの「ふりかえりカイゼン」の導入で学んだこと
 
ゼロから始める自作 CPU 入門
ゼロから始める自作 CPU 入門ゼロから始める自作 CPU 入門
ゼロから始める自作 CPU 入門
 
レッツゴーディベロッパーX 2014
レッツゴーディベロッパーX 2014レッツゴーディベロッパーX 2014
レッツゴーディベロッパーX 2014
 
KPT採集
KPT採集KPT採集
KPT採集
 
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
 
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
 

More from Ryoya Kawai

Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyoWeb audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
Ryoya Kawai
 
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Ryoya Kawai
 
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoWeb musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Ryoya Kawai
 
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
 
Web Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conferenceWeb Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conference
Ryoya Kawai
 
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music ChinaMaking Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
Ryoya Kawai
 
Web music開発環境
Web music開発環境Web music開発環境
Web music開発環境
Ryoya Kawai
 
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1 Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
Ryoya Kawai
 
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
Ryoya Kawai
 
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Ryoya Kawai
 
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Ryoya Kawai
 
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI APIChrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Ryoya Kawai
 
Chrome Packaged Apps
Chrome Packaged AppsChrome Packaged Apps
Chrome Packaged Apps
Ryoya Kawai
 
Web MIDI API 2nd WD
Web MIDI API 2nd WDWeb MIDI API 2nd WD
Web MIDI API 2nd WDRyoya Kawai
 

More from Ryoya Kawai (14)

Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyoWeb audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
 
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
 
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoWeb musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
 
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
 
Web Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conferenceWeb Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conference
 
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music ChinaMaking Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
 
Web music開発環境
Web music開発環境Web music開発環境
Web music開発環境
 
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1 Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
 
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
 
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
 
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
 
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI APIChrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
 
Chrome Packaged Apps
Chrome Packaged AppsChrome Packaged Apps
Chrome Packaged Apps
 
Web MIDI API 2nd WD
Web MIDI API 2nd WDWeb MIDI API 2nd WD
Web MIDI API 2nd WD
 

Recently uploaded

ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
Yuuitirou528 default
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 

Recently uploaded (14)

ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 

Web MIDI meets DIY #0