Web Music Developers JPのアドベントカレンダーの12月15日の記事です!

追記:Web MIDI APIの仕様は日に日に更新されています。2013年1月8日の段階で既にこの説明の説明からは変更されていますのでご注意ください。

2012年12月11日にWeb MIDI APIのWorkingDraft 第二版になりました。サンプルコードも追加され、また編集者の一人であるChris Wilsonさんがプラグインを使ったエミュレーションライブラリ(Polyfill)を公開してくださいました。仕様とサンプルを同時にレビューすると長くなりそうなので「仕様のレビュー」、「サンプルコードのレビュー」の2部構成で進めさせていただこうと思います。初回の今回は「仕様のレビュー」を行います。

さて、まずは「MIDI」と「Web MIDI API」についての簡単な説明です。 MIDIは「Musical Instrument Digital Interface」の略で、日本語にすると「電子楽器デジタルインターフェイス」、電子楽器の演奏データを機器間でデジタル転送するための世界共通規格です。そしてWeb MIDI APIです。HTML5のデバイスアクセスの仕様の1つとしてW3Cで策定が進められているウェブブラウザから”プラグインを使わずに”電子楽器へ直接接続を可能にする為のAPIです。とはいえ、最近のコンピュータでMIDIポートを搭載しているものはありませんので、基本的にはUSB-MIDIでの接続になります。Web MIDI APIの最終的な仕様は2013年の第3四半期に策定される予定になっています。

それではWeb MIDI APIの仕様のレビューをしていきます。 最初に全体的な構成です。(i)がinterface、(m)がmethodを示しています。また「->」の意味ですが、例えば「A -> return B」だとすると「Aを実行するとBがくる」という意味で使っています。

  • (i)NavigatorMIDIAccess
    - (m)getMIDIAccess -> return void
  • (i)MIDIAccess
    - (m)enumerateInputs -> return (i)MIDIPort
    - (m)enumerateOutputs -> return (i)MIDIPort
    - (m)getInput -> return (i)MIDIInput
    - (m)getOutput -> return (i)MIDIOutput
  • (i)MIDIPort
  • (i)MIDIInput
  • (i)MIDIOutput
    - (m)send -> return void
  • (i)MIDIEvent

次に(i)のついているinterfaceを説明します。

UserAgentのwindow.navigatorに属するObjectでMIDI機器へのアクセスを可能にします。

interface NavigatorMIDIAccess {
      void getMIDIAccess(successCallback, optional errorCallback)
    }

MIDIAccess

UserAgentに接続されているMIDI機器のリストアップ、またアクセスを可能にします。

interface MIDIAccess {
      sequence<MIDIPort> enumerateInputs();
      sequence<MIDIPort> enumerateOutputs();
      MIDIInput          getInput(MIDIPort or DOMString or short target);
      MIDIOutput         getOutput(MIDIPort or DOMString or short target);
}

MIDIPort

MIDIのInput/Outputポートで、名前、製造会社、MIDIポートのタイプ(input/output)、ユニークIDを提供します。

interface MIDIPort: EventTarget {
      DOMString    fingerprint;
      DOMString    manufacturer;
      DOMString    name;
      MIDIPortType type; // input or output
      DOMString    version;
}

MIDIInput

MIDIPortに組み込まれていて、さらにMIDIメッセージハンドラをデバイスへ割当てることが可能です。onmessageにMIDIメッセージを取得した時の処理を関数として書きます。

interface MIDIInput {
  attribute callback? onmessage;
}

MIDIOutput

MIDIPortに組み込まれていて、またMIDIメッセージをOutputポートへ送信するメソッドを提供します。

interface MIDIOutput {
  void send(sequence<short> data, optional DOMHighResTimeStamp? timestamp);
}

MIDIEvent

MIDIInputのonmessage handlerに渡されたEventオブジェクトで、MIDI data byteに加えてtimestampも含まれています。

interface MIDIEvent: Event {
  attribute DOMHighResTimeStamp timestamp;
  attribute Uint8Array          data;
}

最後に(m)のついているmethodの説明です。

getMIDIAccess(successCallback, optional errorCallback)

  • successCallback: MIDI機器が取得できた場合のCallback
  • -> (i)MIDIAccess を渡す
  • errorCallback: なんらかの理由でMIDI機器を取得できなった場合のCallback
  • enumerateInputs()
  • 引数なし
  • 利用可能なMIDI input port[(i)MIDIInput]のリストを配列で返す

enumerateOutputs()

  • 引数なし
  • 利用可能なMIDI output port[(i)MIDIInput]のリストを配列で返す

getInput(target)

  • target: (i)MIDIPort、または、(i)MIDIPortのfingerprint[DOMString]、
    または、 enumerateInputs()で取得したindex[short]

getOutput(target)

  • target: (i)MIDIPort、または、(i)MIDIPortのfingerprint[DOMString]、
    または、enumerateOutputs()で取得したindex[short]

send(data, optional timestamp)

  • data: 配列にしたshort
  • timestamp: DOMHighResTimeStamp(暫定?)

といった仕様になっています。 これだけではイメージするのは難しいと思いますが、「サンプルコードのレビュー」も続けて書きますので、そちらも合わせてご覧になるともっとイメージが湧くと思います。

ということで今回はここまでということで!

Web Music Developers JPのアドベントカレンダーの12月13日の記事です!

ネタは「緊急車両通りますよ〜っと!「Web Audioでドップラー効果」」です。 物理の授業で出てくる定番かな、って思います。 ドップラー効果は19世紀半ばにオーストリアの物理学者ドップラーさんが発見しました。簡単に説明すると、音は音源を中心に球状に音波の速度で伝わります。聞き手が音源に向けて一定の速度で近づくとき、音波の速度は (音波の速度)+(聞き手の速度) となりますが、音源から遠ざかる時は (音波の速度)-(聞き手の速度) となり、この音波の速度が異なることで音程が変わる、というのが原理です。

さて、ここからWeb Audioへの実装の下準備です。 今回は音は固定、聞き手(針金人間)が動くという想定で実装していきます。 変数と式はそれぞれ以下のようになります。

  • 音波の速度:340(m/s) で固定します。(14.17℃の時の音波の速度です)
  • 波周波数: F0 = V340 / Lambda
  • 初期状態において聞き手から音までの距離:d(m)
  • 聞き手の速度: v0 (m/s)
  • 聞き手の周波数:F1

(a) 音よりも右の場合:F1 = (V340 + v0) / Lambda = F0 ( V0 + U1 ) / V0

var tune = (V340+v0)/V340; // L32: js/dopplerEffect.js

(b) 音よりも左の場合:F1 = (V340 - v0) / Lambda = F0 ( V0 - U1 ) / V0

var tune = (V340+v0)/V340; // L32: js/dopplerEffect.js

(a)と(b)の分岐は、

d-v0*(i*interval)/1000 // L31: js/dopplerEffect.js

が、0より大きい場合は(a)、0より小さい場合は(b)となります。

このとき interval は JavaScriptのSetIntervalが呼ばれる間隔(ミリ秒)です。iはSetIntervalを何回通ったか、という変数にしていますので

(i*interval)/1000

は今までに聞き手が初期状態から動いた距離になります。

あとせっかくなので、PanとVolume(Gain)を変えてより臨場感を出します。 WebAudioでのPanは3次元で設定できますが、今回はその1次元だけを使います。最大値は1.0、最小値は-1.0、中央は0.0となっていますのでそのように動くように式を作ります。Volumeは最大値は1.0、最小値は0.0ですが、今回は音が大きくなり過ぎるのを避けるために最大値は0.5と設定しました。 音源は定番の救急車の「ピーポーピーポー」にしました。ヘッドホンで聞くとより臨場感のあるドップラー効果を聞けると思います。

実装したモノはこちらです。

1つもヒネリがなかった訳ですが、Web AudioってHTML5なのでテキストエディタとブラウザがあれば実装できるので、教育現場で使えたりするんじゃないかな〜、なんて密かに思っています。科学って実際に肌で触れるとより理解できると個人的には思っているので、特にWeb Audioに関してはそっちでも使われるといいな〜、なんて抱いています。

つい先日Google+に「コミュニティ」機能が追加されました。 まず「Google+って何?」というところだと思います。ざっとこんな感じです。

  • 情報を発信できる
  • 人をフォローして投稿を読む事ができる
  • フォローを分類してサークルというグループを作る事ができる
    (他人には非公開)
  • サークル、人を限定した投稿ができる
  • イベント機能を使ってイベント開催を周知できる
    (Google Calenderにも反映される)
  • イベント中の写真を立てたイベントに紐づけてアップロードでき共有できる
  • ハングアウト機能を使ってビデオチャット的なことができる

「Twitter、Facebookと同じじゃん。」とお気づきかもしれません。そうですその通りです。ただし 投稿先を細かく設定できる 点が他のTwitter、Facebookとは大きく違うところだと思います。またイベント機能を使うと例えばパーティー、勉強会等の告知が簡単にできて、さらにハングアウトではストリーミングで映像の配信、音楽セッションができたりします。どのSNSよりも詳細な設定が可能なところが僕は気に入っています。

そして本題のGoogle+のコミュニティ機能。これは特定の人達とのコミュニケーションができる場です。サークルとの違いは、サークルは各個人の嗜好で人を追加して個人が個人の為にだけ作り上げるのに対して、コミュニティは個人の嗜好で参加することで人が集まるという違いがあります。そうGoogle+のコミュニティは学校の活動に例えるとサークルですね。(ちょっとややこしい。。。)

コミュニティの作成に関しては任意で「公開」、「非公開」の設定が可能、参加制限についてもオーナーの許可の有無の選択ができます。さらにコミュニティの中にもイベントも作れます。議論もしすいようにタグが用意されていて任意に設定できます。グループで集まって何かするには最適だと思います。例えば結婚式の二次会とかを想定すると、運営が1、2人なら連絡、意思疎通に問題ないのですが複数人になると集まるだけでも大変だと思います。それを、この機能を使って役割毎にタグを作成して問題が起こったらタグ付けをして議論・告知、アイデア出しもタグをつけて発言、また集まる日程はイベントで、といった感じで本来煩わしいやりとりをスマートに進められるんじゃないかな〜、と思います。

まとまりのないダラダラとした説明になっていますが「Google+コミュニティいいね!」とも言いたいですが、実は「Google+いいよ〜」ともいいたいのですf(^-^;)ということで、まだ使った事ない方は使ってみると心地の良いSocialな日々が送れる思いますよ〜

ちなみに、蛇足ですが僕はここにいます。

CoCo壱番屋 カツカレーチップス」(限定商品)です。

名前の通り、CoCo壱番屋のカツカレーの味がするチップスです。味の再現性が結構高いです。個人的にCoCo壱番屋のカレーって独特の味で、カレーというより「ココイチ」というジャンルを作ってもいいんじゃないか、って思ってる(もちろん悪い意味ではないですよ!)のですが、その味が再現されてておいしいチップスでした。もちろん単なるカレーの味ではなくて「カツカレー」の味の再現です。ちょっと感動しました。

ビールのお供に最適かな〜って思いました!限定商品らしいので、これを見かけたビール好きの方は一度お試しあれ〜!!

ふらっと立ち寄ったローソンで見つけた「とっておき宣言 シナモンロール」です。

経験からすると、コンビニに売ってるシナモンロールって菓子パンの亜種的な食感だったり、味が薄かったりでガッカリすることが多いので、そこまで期待はしてませんでした。しかしながら今回のはレベル高かったです。味もそこそこ濃く、日本的な甘さで、かつ菓子パンの亜種の域を脱していて、おいしかったですよ〜!! 「シナモンロールって甘過ぎるんでしょ??」って方にもお勧めできるんじゃないかな?って思いました。

ちょうど六本木にシナボン</a2>が再上陸したと聞いて(できるだけ美味しい)シナモンロールを望んでたところでしたのでとても満足でした。でも、やっぱり本物食べたいので今年中にシナボン行きたいな、って思っています。(改めて比べるとシナボンのシナモンのトップの砂糖の量が相当違いそうですねf(^-^;))