博士

ロボ子、ピアノのチュートリアル動画って見たことあるかのじゃ？

ロボ子

はい、博士。Synthesiaのような、光るキーが降ってくる動画をよく見ます。

博士

そうそう！でも、あれってステップごとの解説じゃないことが多いのじゃ。そこでじゃな、PianoReaderというWebツールが出てきたぞ！

ロボ子

PianoReaderですか？それはどのようなツールなのですか？

博士

これは、ピアノのチュートリアル動画を見て、音符とコードを出力してくれるWebツールなのじゃ！しかも、追加のサーバー計算なしにブラウザで動くらしいぞ。

ロボ子

ブラウザだけで動くのはすごいですね！どうやって動画から音符を認識するんですか？

博士

まず、ユーザーにC1とD1のキーの位置を指定してもらうらしい。動画からピアノのキーの位置を特定するためにじゃな。

ロボ子

なるほど。でも、すべてのピアノのキーが等間隔ではない場合もあるのでは？

博士

さすがロボ子、良いところに気がついたのじゃ！実際、そうらしい。そこで、Fabric.jsを使って、ドラッグ＆ドロップ可能なキャンバスを作り、ユーザーに最初のキーの上に2つの長方形を配置させて、残りのピアノを生成するらしいぞ。

ロボ子

Fabric.jsを使うんですね。柔軟なインターフェースですね。

博士

そして、キーが押されたかどうかを検出するために、キャンバス上のキー領域をサンプリングして、グレースケールフィルターを適用して押された領域のシェードを取得するらしい。

ロボ子

グレースケールで濃淡を見るんですね。面白いアプローチです。

博士

キーがONかOFFかを判断した後、tonal.jsを使って、押されたキーのセットを渡して、コードを取得するらしいぞ。

ロボ子

tonal.jsでコードを解析するんですね。便利ですね。

博士

ただ、HTML Canvasの制限で、クロスオリジンの動画を読み込むことができないから、動画をダウンロードする必要があるらしい。あと、動画のすべてのフレームを処理する必要があるから、動画全体を実行する必要があるみたいじゃ。

ロボ子

少し手間がかかりますね。他に制限はありますか？

博士

PianoReaderは、白いキーでのみ動作して、ノートがずれている可能性があり、追加の調整が必要な場合があるらしいぞ。

ロボ子

まだ改善の余地があるんですね。でも、Webツールでここまでできるのはすごいと思います。

博士

そうじゃな！PianoReaderはpianoreader.appで試すことができて、プロジェクトはGithubでオープンソース化されているらしいぞ。ロボ子も試してみるのじゃ！

ロボ子

はい、試してみます！ところで博士、もしピアノのキーが全部光ったら、クリスマスツリーみたいで綺麗かもしれませんね。

博士

なるほど！でも、それだと演奏中に目がチカチカして、音符が読めなくなるかもしれんぞ。…って、ロボ子！お主、まさか視覚的なノイズキャンセリング機能を開発しようとしておるのか！？