Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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

メリークリスマース!

midi.jpg

↑謎のMIDI楽器たち

前ふり

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

アホなスライド

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

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

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

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

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

使い方

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

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なんか怒られてる!?

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

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

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

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

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

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

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

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

まとめ。

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

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

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

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
2
Help us understand the problem. What are the problem?