SlideShare a Scribd company logo
1 of 27
Download to read offline
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
 
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 2014Noriyuki Nemoto
 
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会
自作コンピューターでなんかする - 第八回 カーネル/VM探検隊&懇親会Hirotaka Kawata
 
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015
「本を書くプロジェクトマネジメントはWbsかアジャイルか」 XP祭り2015Fumitaka 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.tokyoRyoya 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@sapporoRyoya 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 conferenceRyoya 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 ChinaRyoya 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音楽の世界 - 大音学会 2013Ryoya 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 APIRyoya Kawai
 
Chrome Packaged Apps
Chrome Packaged AppsChrome Packaged Apps
Chrome Packaged AppsRyoya 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

スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 

Recently uploaded (10)

スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 

Web MIDI meets DIY #0