feb19

Nobuhiro Takahashi
Designer / Engineer

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

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

date
2017.12.24(Sun.)
tags
MusicWebMIDI

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

今回の内容

これを作りました。

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

楽譜の制作

We Wish You A Merry Christmas

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

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

アセットの制作

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

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

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

Snowflake

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

MIDI 演奏向けの下ごしらえ

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

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

というわけで成果物の演奏

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

デモページとソースコード

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

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

参考

著者: @feb19