Help us understand the problem. What is going on with this article?

アホみたいなWeb MIDI APIラッパーを更新してたらいろいろと気づいた

More than 3 years have passed since last update.

メリークリスマース!

midi.jpg

↑謎のMIDI楽器たち

前ふり

普段 Web MIDI APIでは主に「リアル金属音を鳴らす」という偏った活動をしてる @tadfmacです。

アホなスライド

勢いでアドベントカレンダーに登録してしまった!
どうしよう!ネタはない!時間もない!

というわけで、やってみて起こったことをつらつらと書きます。すいません...

やってみたこと。 poormidi.js -> pomidi.js

アホみたいなWeb MIDI APIの Wrapper ですが、さすがにいろいろアレなので、さらにアホみたいに書けるように進化(!?)させようと企んでいます。

まだ githubにはpushしてませんけど、こちらに置いてあります。

https://mz4u.net/libs/posnd/pomidi.js

使い方

こんな感じで書けるようになります。

main.js
(async ()=>{
  var midi = await new pomidi();
  midi.sendNoteOn(30);
  await midi.wait(100);
  midi.sendNoteOn(40);
  await midi.wait(100);
  midi.sendNoteOn(50);
})();

かんたん!
アホみたいなケースにしか使えなさそうな気もしますが遊んでください!

気づいたこと 1. Chrome 63から Cross-Origin iframes で MIDIの利用が制限される?

jsFiddle 便利ですね!
さきほどの pomidi.js もjsfiddleでテストしてました。

こんな感じのスクリプト書いてWindow 2つ開いて遊ぶ感じです。

MacでIACを有効にしておくと Window間でMIDI渡せるよー

しかし!
コンソールにこんなメッセージが!

warnning.png

ええ!?どういうこと!?
Web MIDI APIなんか怒られてる!?

なんか見覚えあるような....と思ったら、ここ↓に書いてありました。

https://groups.google.com/forum/#!topic/web-music-developers-jp/zj3EEFQQTx0

MIDIだけでなく、getUserMedia も同じように制限されるようになる模様。

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes

まぁ、iframe 経由で Web MIDI API 使うなんてのは普通はやらないので影響ないわけですが、jsfiddle で外部jsファイルを読み込むように書いたら、たまたまそういう構造になっていてひっかかった。という話でした。jsfiddle 使ってなかったら気づかなかった気がする。

気づいたこと 2. なんかエラー?

というか、requestMIDIAccess()で見慣れないエラーもでるようになってるぞ。Chrome 62。
InvalidStateError: Platform dependent initialization failed.

なんだ?これ。
ちょっとしらべてみると、issueで報告されているようです。

https://bugs.chromium.org/p/chromium/issues/detail?id=718140

どうやら、chrome://flags/#enable-midi-manager-dynamic-instantiationdefault になってると、起こることがある? という雰囲気。(ちゃんと読んでないw)

悩まず disable に。→なんとなく起こらなくなった模様。ノープロブレム。

まとめ。

やはり Web MIDI APIおもしろい。

ChromeではWebUSBも実装されたので、USB経由でいろいろやれる可能性は広がったけど今のところMIDIに合わせこんでいろいろやる方が自分にはちょうどいい。

というわけで、他のブラウザでも早く使いたいので、Edgeに Web MIDI API実装してもらえるようお願いしよう!

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508429-web-midi-api

tadfmac
aka D.F.Mac. 実験音楽家。TripArts Music主宰。ハンディーレコーダーでの音集めが趣味。 Web技術、フィジカルコンピューティングなどにも興味があります。
http://soundcloud.com/tadfmac
kddi
KDDIは、通信を中心に周辺ビジネスを拡大する「通信とライフデザインの融合」をより一層推進し、国内はもとよりグローバルにおいても、5G/IoT時代における新たな価値創造を実現し、お客さまの期待を超える新たな体験価値の提供を追求してまいります。
http://www.kddi.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away