SlideShare a Scribd company logo
1 of 16
Download to read offline
WEB MIDI APIを 
うまく使うための話 
面白法人カヤック HTMLファイ部 
藤澤伸 / @FNOBI
はじめまして! 
面白い法人でWEBやANDROIDや曲を書いてます。 
のびーといいます。
今日は、 
WEB MIDI API 
の話をさせて頂きます。
WEB MIDI APIとは? 
• PCに繋いだMIDIデバイスとブラウザで、直接通 
信するための規格 
• キーボードで弾いた音をブラウザで認識できる! 
• ブラウザで生成した楽譜を外部音源で再生!
ポケミクでちょっと有名になった。
しかし、
どう考えても地味。 
• 利用者のブラウザにMIDI端末がつながっている 
必要がある → そうそうない 
• MIDIを簡単に扱える、という利点はあるが、ブ 
ラウザを挟む必然性がない 
• ポケミクのように、デバイスを配って、それと 
一緒に使ってもらうようなサイトならよいが、 
稀なケース
というわけで、 
使い道を考えてみる
そもそもMIDIとは
• 電子楽器の演奏データを機器間でデジタル転送す 
るための世界共通規格 
• よくある「.MIDI」ファイルは、STANDERD 
MIDI FILEというやつ 
• 楽器への演奏データ送信の他、舞台演出装置の同 
期等にも使われている 
• 必ずしも、音楽のための形式ではない!
WEB演出のパラメータを 
保存するためのMIDI 
というものが考えられるのでは?
MIDI信号が持っている情報 
• 音の開始・停止 (NOTEON・NOTEOFF) 
• 音階 
• 音色 
• 音の強さ
デモをつくってみました 
http://140926-webmidiapi.fnobi.com/ 
• キーボードつないで叩くとなんか出ます 
• 演出保存機能あり!! 
• consoleから disk.startRecording() すると録音 
• disk.stopRecording()すると停止・自動再生
今後の展望 
ちゃんと.MIDIで保存できるようにする 
• 音楽編集ソフトで微調整ができる!! 
• 既存ライブラリあるので、それを組み込む
_人人人人_ 
> 告知 < 
‾YYYY‾ 
来月頭、カヤックも似たようなイベントやります。 
! 
! 
! 
! 
おいしくてためになる!
ありがとうございました

More Related Content

Similar to WEB MIDI APIをうまく使うための話

Abc発表資料(2012s)
Abc発表資料(2012s)  Abc発表資料(2012s)
Abc発表資料(2012s) Junichi Katsu
 
Midi with android
Midi with androidMidi with android
Midi with androidkshoji
 
Web MIDI meets DIY #0
Web MIDI meets DIY #0Web MIDI meets DIY #0
Web MIDI meets DIY #0Ryoya Kawai
 
クラウド―Arduino接続について
クラウド―Arduino接続についてクラウド―Arduino接続について
クラウド―Arduino接続についてKenichi Yoshida
 
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -Kishi Shundo
 

Similar to WEB MIDI APIをうまく使うための話 (7)

Abc発表資料(2012s)
Abc発表資料(2012s)  Abc発表資料(2012s)
Abc発表資料(2012s)
 
Arduino MIDI Hack
Arduino MIDI HackArduino MIDI Hack
Arduino MIDI Hack
 
Midi with android
Midi with androidMidi with android
Midi with android
 
Web MIDI meets DIY #0
Web MIDI meets DIY #0Web MIDI meets DIY #0
Web MIDI meets DIY #0
 
Elekijack 2012
Elekijack 2012Elekijack 2012
Elekijack 2012
 
クラウド―Arduino接続について
クラウド―Arduino接続についてクラウド―Arduino接続について
クラウド―Arduino接続について
 
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
 

Recently uploaded

AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfFumieNakayama
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?akihisamiyanaga1
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案sugiuralab
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)UEHARA, Tetsutaro
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfFumieNakayama
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...博三 太田
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineerYuki Kikuchi
 

Recently uploaded (8)

AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
 

WEB MIDI APIをうまく使うための話