WebMIDI API と Reface CP でクリスマス的なことをする

この記事は WebAudio/WebMIDI API Advent Calendar 2017の記事です。よろしくお願いします。普段はこのサイトやどこかで箸にも棒にもかからないアプリやサービスを作ったりしている者です。

今回の内容

これを作りました。

クリスマスっぽい何かを作った〜 https://t.co/Hk1Zas3Ru1
軽く演奏動画と合成してみたらエッチな感じになった…😇😇😇 pic.twitter.com/Aqgm6VwGAO
— feb19 (@feb19) December 24, 2017

アドベントカレンダーらしく「We Wish You a Merry Christmas」をテーマにしてみました。日本だと「おめでとうクリスマス」と訳されているみたい。この曲は 16 世紀イギリスで作られた民謡であって、著作権切れてるんで採用。これ書いとかないと JA おっと誰か来たようで👀

Reface で弾く用に編曲した楽譜をまず作りました(勘ですが...)。後ほどの説明用にも。iPad に入れた Notion 製です。

Reface CP にはトイピアノの音色があるので、音色に合わせて全体的に 8va します。

先ほどの楽譜を読むと、右手で登場する音階はドレミファ#ソラシなので、この 7 音に対応したアセットを制作します（左手もっと多かったけど...）。

プログラムで生成できるようにするため（というかコードでグラフィックを作りたい気分だったので）、雪の結晶を生成するコードを 7 種類用意します。

一応 iPad でどういう感じの結晶にするか描いてみたりしながら...。

コード化してアニメーションさせたのがこれ。シャープ(＃)が付く場合はアニメーションを逆再生にするアイデアが思いついたのですが時すでにおそし。

たのC pic.twitter.com/3hsase6xjd
— feb19 (@feb19) December 20, 2017

それっぽくなればツールはなんでもいいので、今回は PixiJS を使用しました。表示をランダマイズアニメーション化して、デュレーションによって生成される数を増減する、サイズをベロシティに応じて変更可能なようにするなど、MIDI 演奏向けの下ごしらえをします。

スクリーン上端から降ってくるとイマイチかもなーと思ってノートオンから少しレイテンシーを感じてしまうかもしれないけど、雪の結晶が形成されていくようなアニメーションをしながら登場させることにしました。

とりあえず下ごしらえ終わった
模様やアニメーションの算数たのちい pic.twitter.com/LasG4Bm4go
— feb19 (@feb19) December 19, 2017

結晶だけでなく、定常的に雪の粉が舞ったりするアニメーションも付け加えました。

クリスマスっぽい何かを作った〜 https://t.co/Hk1Zas3Ru1
軽く演奏動画と合成してみたらエッチな感じになった…😇😇😇 pic.twitter.com/Aqgm6VwGAO
— feb19 (@feb19) December 24, 2017

このデモが試せるサンプルページはこちら。あんまり参考にならないと思いますがコードはこちら(WebMIDI API で MIDI 機器認識してノートをパースしているだけです)。

パソコンに MIDI キーボードを繋いで、Chrome で MIDI の使用を許可することで弾いてみることができます。試してみてください！

著者: @feb19