Submit Search
Upload
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
•
16 likes
•
9,325 views
Ryoya Kawai
Follow
@HTML5 CONFERENCE 2013
Read less
Read more
Technology
Report
Share
Report
Share
1 of 33
Download now
Download to read offline
Recommended
20150129 raセミナー 高宮発表
20150129 raセミナー 高宮発表
Tomo Takamiya
Web Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conference
Ryoya Kawai
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Ryoya Kawai
Web 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 -
Ryoya Kawai
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Ryoya Kawai
Web MIDI meets DIY #0
Web MIDI meets DIY #0
Ryoya Kawai
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
Recommended
20150129 raセミナー 高宮発表
20150129 raセミナー 高宮発表
Tomo Takamiya
Web Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conference
Ryoya Kawai
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Ryoya Kawai
Web 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 -
Ryoya Kawai
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Ryoya Kawai
Web MIDI meets DIY #0
Web MIDI meets DIY #0
Ryoya Kawai
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
Making 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開発環境
Ryoya Kawai
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
Ryoya Kawai
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Ryoya Kawai
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Ryoya Kawai
Chrome Packaged Apps
Chrome Packaged Apps
Ryoya Kawai
Web MIDI API 2nd WD
Web MIDI API 2nd WD
Ryoya Kawai
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
More Related Content
More from Ryoya Kawai
Making 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開発環境
Ryoya Kawai
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
Ryoya Kawai
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Ryoya Kawai
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Ryoya Kawai
Chrome Packaged Apps
Chrome Packaged Apps
Ryoya Kawai
Web MIDI API 2nd WD
Web MIDI API 2nd WD
Ryoya Kawai
More from Ryoya Kawai
(7)
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
Web music開発環境
Web music開発環境
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome Packaged Apps
Chrome Packaged Apps
Web MIDI API 2nd WD
Web MIDI API 2nd WD
Recently uploaded
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Recently uploaded
(11)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
1.
ブラウザとMIDIの出会いが拓く WebとMusicの新しい世界 AMEI Web MIDI
WG Yamaha Corporation Ryoya KAWAI google.com/+RyoyaKawai
2.
かわい りょうや AMEI Web
MIDI WG ヤマハ株式会社 Web Music Developers JP google.com/+RyoyaKawai
3.
AMEI について ● 一般社団法人
音楽電子事業協会 ○ MIDI規格を策定していたMIDI規格協議会(JMSC)が前 身で、1996年に社団法人化された。活動内容は、日本 国内においてMIDI規格の標準化、規格の策定、管理、 普及活動(MIDI検定試験)を行っている団体。 ○ 2013年9月 Web MIDI Working Groupを発足させ、同 時にW3Cへ加盟し積極的にWeb MIDI APIの規格策定 ・普及活動を開始。 URL:http://www.amei.or.jp/
4.
Web MIDI APIのイメージ:1 http:// MIDI
!! MIDI
5.
Photo by Alexander
Henning Drachmann License under CC BY-SA 2.0 そもそもMIDIって何?
6.
MIDIの概要 ● Musical Instrument
Digital Interface ○ 電子楽器同士を接続する為のインターフェイス ■ 非同期シリアル通信 ● 速度:31.25kbps ● データ単位:8bits (1byte) ■ 端子:IN、OUT、THRU ■ 1ポート:16 チャンネル
7.
MIDIメッセージの基本:1 ● MIDIメッセージの種類 ○ チャンネル・メッセージ ■
チャンネル毎に独立した演奏情報を伝える ○ システム・メッセージ ■ 全体をコントロールする情報を伝える (9nh) (8nh) (F0h‥F7h) (Cnh)
8.
MIDI Messsage Tester MIDIメッセージの基本:2 ●
MIDIメッセージの構成 ○ 単・複数の8bit (1Byte) で構成 ○ Status Byte(80h-FFh)、Data Byte(00h-7fh) 例1)Channel=0 で A4(NoteNo=69/45h) を 101/65h の Velocity の音を鳴らす 9 0 NoteOn Channel 45 65 A4 (NoteNo=69/45h) Velocity (101) ※ Channel=0 の A4(NoteNo=69) の音を止める (noteOff (8nh)) ▶ 80h 45h 00h 例2)Channel=0 の音色を Applause(programNo=126) に変更 C0 NoteOn Channel 7E Applause (ProgramNo=126/7Eh) (9nh) (8nh) (Cnh)
9.
MIDIメッセージの基本:3 ● System Exclusive(SysEx) ○
電子楽器固有の機能を制御する為に使用 ■ Voice、エフェクトのパラメータ等を送信 ○ メッセージ ■ F0hで始まり、F7hで終わる ■ 可変長 F0h <ID Number> <Device ID> ・・・ ○ ID Numnber (ManufactuererID) ■ 楽器メーカが持つ固有のID ● 取得には申請が必要 (申請先:AMEI(日本)、MMA) F7h
10.
メリット ■ 信号なので実際の音よりデータ量が少ない ● ● 「発音せよ!」、「音色を変えろ!」等の信号 1分約10kb以下 ■ ON/OFF
に強弱がるけられる ■ シーケンスが書ける
11.
Web MIDI APIのイメージ:2 http:// MIDI
!! MIDI
12.
ユースケース ○ 音楽用途 ■ 電子楽器の複数台同時コントロール ■
DAW(Cubase, Grageband等) ■ カラオケ、演奏記録アプリ ■ 遠隔地ライブ配信 Elton John Remote Live ○ Show(MSC:MIDI Show Control) ■ Universal Studio Water World ■ Bellagio fountain show
13.
Web MIDI APIのイメージ:3 http:// MIDI MIDI
!! MIDI
14.
ブラウザの中でがんばってるのは? http:// MIDI !! Designed by
@g200kg
15.
Photo by Eric
Merrill License under CC BY-SA 2.0 どんなのが作れるの?
16.
ハッカソンやりました!! ● Web Music
ハッカソン #1 ○ VJ(Video Jockey) App [URL] ○ Collaborate with other web APIs [URL] [URL]
17.
Photo by marsmet462
License under CC BY-NC-SA 2.0 でも、難しいんでしょ?
18.
ソースコード 接続は17行!! 「0」をOUTPUTデバイスとしてセット 「0」をINPUTデバイスとしてセット INPUTから入力されたMIDIメッセージを OUTPUTに送信する 注) 2013/11/30 現在
Chromeで動作する書式です
19.
ソースコード 接続は15行!! 「0」をOUTPUTデバイスとしてセット 「0」をINPUTデバイスとしてセット INPUTから入力されたMIDIメッセージを OUTPUTに送信する 注) 変更される可能性もあります。
20.
ブラウザの対応状況 enable with Polyfill I
am inside!! https://github.com/cwilso/WebMIDIAPIShim Microsoft Connect
21.
Photo by Matt
Scott License under CC BY 2.0 MIDI知らない、、、orz
22.
MIDIを知らなくても大丈夫! ● Web MIDI
API Wrapper ○ チャンネルメッセージをほぼ網羅 http://goo.gl/rWvhGW (英語) http://goo.gl/RAJJTw (日本語)
23.
Web MIDI API
Demo
24.
Web Audio APIと使う FM
Synth デモ Analog Synth デモ
25.
楽器じゃない!? http://goo.gl/KWT2Cn
26.
yamaha-webmusic.github.io Web MID Tool
Box
27.
はじめるならこれ!
28.
MIDI音源:eVY1 Shield ● eVY1
Shield (eVocaloid by Yamaha) ○ http://www.switch-science.com/catalog/1490/ Arduino !! USB-MIDI !! 特徴 1ch:eVocaloid 2-16ch: General MIDI (GM) ex) Culture of Vocaloid : http://youtu.be/xExy_FCC0PA
29.
MIDIコントローラ:nanoシリーズ2 ● KORG nanoシリーズ2 ○ http://www.korg.co.jp/Product/Controller/nano2/
30.
Musicを加えてWebを もっと楽しもう!
31.
One more thing... Web
Music Developers JP ▶ http://goo.gl/G9U8Mr Web Music ハッカソン #2 やります!! ● 2014年1月中旬(予定)
32.
ご清聴ありがとうございました!
33.
アンケートにご協力ください! あなたのフィードバックが、 html5jの活動を支えています! http://bit.ly/html5C201311 アンケートへ答えた方にもれなく記念品プレゼント! (アンケートの完了画面を1F受付にてご提示ください) お知らせ: 最終スペシャルセッションの開始時刻が変更になりました(18:30→18:20) 10分早まっています。ご注意ください!
Download now