Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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() する...
今後の展望 
ちゃんと.MIDIで保存できるようにする 
• 音楽編集ソフトで微調整ができる!! 
• 既存ライブラリあるので、それを組み込む
_人人人人_ 
> 告知 < 
‾YYYY‾ 
来月頭、カヤックも似たようなイベントやります。 
! 
! 
! 
! 
おいしくてためになる!
ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

1,866 views

Published on

・WEB MIDI APIは地味なので、なんか使い道つくりたい
・実はMIDIは、必ずしも音楽に使わなくてもいい
・演出をデバイスから直接入力して、ファイルとしても保存できる、というのはなかなかステキなんじゃないか
・そんなかんじのデモつくりました

Published in: Technology
  • Be the first to comment

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

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

×