SlideShare a Scribd company logo
1 of 13
Download to read offline
Web ブラウザから MIDI 機器を制御することで
生まれる利点と可能性
- Roppongi ArtTech Night #1-

Web Music Developers JP

かわい りょうや

W3C非公認
Web MIDI APIのゆるキャラ

みでゃっぴー (MIDIappy)
かわい りょうや
> 所属 <
- ヤマハ株式会社
- AMEI Web MIDI WG
> コミュニティ <

- Web Music Developers JP
google.com/+RyoyaKawai
MIDIの概要
● Musical Instrument Digital Interface
○ 主に電子楽器同士を接続する為の規格
(送受信回路・ I/F、通信プロトコル、ファイルフォーマット等)

■ 31年の歴史!!
●

ほぼすべての電子楽器が喋れる

■ 端子
●

IN、OUT、THRU
(16 Chを制御)

○ 音楽以外の用途
■ MIDI Show Control(MSC)
●

MIDIでステージの照明等を
コントロールする規格

●

96台の機材を制御可能
(照明、ビデオ、スモーク、爆発等)
MIDIを感じるデモと映像
● シーケンサ
○ Websequencer (By g200kg)

● 音楽以外をコントロール
○ 名前はまだない(多分今後もない(・ω<))
○ Web Misuc ハッカソンでの作品

光の魔術師集団X
Web MIDI Tool Box

MIDIを感じよう!
● MIDIメッセージの構成
○ 単・複数の8bit (1Byte) で構成
○ Status Byte(80h-FFh)、Data Byte(00h-7fh)
例1)Channel=2 で A4(NoteNo=69/45h) を 101/65h の Velocity の音を鳴らす。
※ Channelに関して、MIDIメッセージ上は 0-F(15)、表記上は1-16の16Channel。

9 1
NoteOn

Channel

45

65

A4 (NoteNo=69/45h)

Velocity (101)

※ Channel=2 の A4(NoteNo=69) の音を止める (noteOff (8nh)) ▶ 81h 45h 00h
例2)Channel=2 の音色を Applause(programNo=126[MIDIメッセージ上]) に変更
※ programNoに関してMIDIメッセージ上は 7E(126):Applause、表記上は127:Applause。

C1
Program
Change

Channel

7E
Applause
(ProgramNo=126/7Eh)

(9nh)
(8nh)
(Cnh)
ブラウザで制御可能!
● Web MIDI API
○ ブラウザと外部MIDIデバイスを連携する為のAPI
■ W3Cで策定が進められている
●

http://webaudio.github.io/web-midi-api/

W3C非公認
Web MIDI APIのゆるキャラ

フラグの変更を忘れずに!!

みでゃっぴー (MIDIappy)

● 実装状況
○ Chrome 33 でほぼ対応済み!!
Thank you very much for Chrome team!!!
Web MIDI APIでもっとデモ
● eVY1 Shield
○ 歌って奏でる次世代音源「NSX-1」を搭載
○ ヤマハではWebアプリを公開しています!
■ Yamaha Web Music (Github)
○ もっと歌わせたい!!
■ eVY1で歌ってみる?
想定問答集
Q1. eVY1 Shield って初音ミクさんの声ですか?
A1. いいえ、eVY1って名前の声です。

Q2. 初音ミクさんのって出ないの?
A2. 可能性が見えるはずなので紹介させてください...><
初音ミクさん クル━(゚∀゚)━!!
● 歌うキーボード ポケット・ミク
from 大人の科学 by Gakken
○ 4月3日発売!
■ amazonで予約やってます。http://goo.gl/98mGMQ
■
ポケット・ミクで何ができるの?
● ポケミク本体で
○ ドレミモードで歌います
○ 「あ〜お」の母音を歌います
○ プリセット歌詞を歌います
■ ちょうちょ、さくらさくら、ほたるのひかり等

● microUSB端子で
○ 電源供給
○ USB-MIDI機器として使えます
■ ということで、、、
○ Webアプリ出ます。
■ ポケミクアプリ00(仮:Config)
■ ポケミクアプリ01(仮:Preset)
■ ポケミクアプリ02(仮:Realtime)
Illustrated by iXima
※ デザインを含め大幅に変更する可能性があります。

Webアプリ スクリーンショット
ポケミクアプリ01(仮:Preset)
● プリセット歌詞の変更が可能
○ FlashROMに記憶
○ 64文字/スロット

ポケミクアプリ02(仮:Realtime)
● リアルタイム歌詞入力が可能
○ マウスオーバーで歌詞送信

※ ポケミクアプリ 03(仮:Config) は鋭意実装中です。
ポケット・ミクのここがスゴイ!
● MIDIメッセージでこれだけコントロール可
○ To ポケミク
■ 歌詞を流し込む
■ 歌詞のどの言葉を歌うのかRequest
■ 歌う [noteOn/noteOff]
■ EFFECT、EQを操作する
■ ボタンの機能をカスタマイズ
■ 詳細機能のカスタマイズ
●
●

起動音を変える
1度に歌う文字数を変更

○ From ポケミク
■ 歌詞をダンプ
■ ボタンの操作状態を送信
■ 詳細情報をダンプ
Recap:MIDIの利点、可能性
● 利点
○
○
○
○
○

ほとんどの電子楽器と接続可能
表現力豊か(127段階)
シビアに時間を管理できるフォーマットがある
シーケンスをファイルでやりとりできる
音楽だけのプロトコルではない

● 可能性
○ アイデア次第で適応範囲は無限大
○ こんなWebDeveloperいてもいかも!
SjQ++
URL:http://goo.gl/rAjirX

More Related Content

Viewers also liked

Social media project
Social media projectSocial media project
Social media projectnicolejoy1
 
Factores de riesgo
Factores de riesgoFactores de riesgo
Factores de riesgopipebarra
 
201509
201509201509
201509umelec
 
Top 8 boiler attendant resume samples
Top 8 boiler attendant resume samplesTop 8 boiler attendant resume samples
Top 8 boiler attendant resume samplesFunFactory789
 
Hello, my name is
Hello, my name isHello, my name is
Hello, my name isJake Green
 
Vintage Power Boat Racing Program Havasu 1967
Vintage Power Boat Racing Program Havasu 1967Vintage Power Boat Racing Program Havasu 1967
Vintage Power Boat Racing Program Havasu 1967idn12
 
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!DaddyGO
 
телеконференция
телеконференциятелеконференция
телеконференцияgibadullina
 
Who Says Good Learning Can’t Be Fun?
Who Says Good Learning Can’t Be Fun?Who Says Good Learning Can’t Be Fun?
Who Says Good Learning Can’t Be Fun?Ed Duffy
 

Viewers also liked (12)

Social media project
Social media projectSocial media project
Social media project
 
Factores de riesgo
Factores de riesgoFactores de riesgo
Factores de riesgo
 
201509
201509201509
201509
 
Top 8 boiler attendant resume samples
Top 8 boiler attendant resume samplesTop 8 boiler attendant resume samples
Top 8 boiler attendant resume samples
 
Hello, my name is
Hello, my name isHello, my name is
Hello, my name is
 
Human Sufferings
Human SufferingsHuman Sufferings
Human Sufferings
 
Slides for October 5, 2014
Slides for October 5, 2014Slides for October 5, 2014
Slides for October 5, 2014
 
Vintage Power Boat Racing Program Havasu 1967
Vintage Power Boat Racing Program Havasu 1967Vintage Power Boat Racing Program Havasu 1967
Vintage Power Boat Racing Program Havasu 1967
 
THE BEATLES
THE BEATLESTHE BEATLES
THE BEATLES
 
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!
 
телеконференция
телеконференциятелеконференция
телеконференция
 
Who Says Good Learning Can’t Be Fun?
Who Says Good Learning Can’t Be Fun?Who Says Good Learning Can’t Be Fun?
Who Says Good Learning Can’t Be Fun?
 

Similar to Roppongi ArtTech Night #1

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
 
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島Ryoya Kawai
 
"楽器 WoT"が拓く未来の演奏体験
"楽器 WoT"が拓く未来の演奏体験"楽器 WoT"が拓く未来の演奏体験
"楽器 WoT"が拓く未来の演奏体験Yukio TADA
 
160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」Yukio TADA
 
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 MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Ryoya Kawai
 

Similar to Roppongi ArtTech Night #1 (7)

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
 
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
 
"楽器 WoT"が拓く未来の演奏体験
"楽器 WoT"が拓く未来の演奏体験"楽器 WoT"が拓く未来の演奏体験
"楽器 WoT"が拓く未来の演奏体験
 
160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」160908 WIDE合宿講演「The Future of Music」
160908 WIDE合宿講演「The Future of Music」
 
Arduino MIDI Hack
Arduino MIDI HackArduino MIDI Hack
Arduino MIDI Hack
 
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 MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
 

More from Ryoya Kawai

Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyoWeb audio control-webaudio.tokyo
Web audio control-webaudio.tokyoRyoya Kawai
 
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoWeb musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoRyoya Kawai
 
Web MIDI meets DIY #0
Web MIDI meets DIY #0Web MIDI meets DIY #0
Web MIDI meets DIY #0Ryoya 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
 
ブラウザと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
 
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 (10)

Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyoWeb audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
 
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporoWeb musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
 
Web MIDI meets DIY #0
Web MIDI meets DIY #0Web MIDI meets DIY #0
Web MIDI meets DIY #0
 
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開発環境
 
ブラウザと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)
 
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
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 

Recently uploaded (7)

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 

Roppongi ArtTech Night #1