コード進行を五度圏で可視化してみた

Songleの外部埋め込みプレイヤーがJavaScriptでカスタマイズできるので、それを利用して五度圏の可視化をするデモを作ってみました。

ロビンソンはコードの動きがわりとおとなしいですね。一方ファッションモンスターはGm Fmを交互にピコピコ動いてダンスを見ているような楽しさが。


Songleは音楽の理解を支援するサービスで、楽曲からコード進行などの情報を抽出し、可視化したり、コード進行を強調して再生したりしてくれます。詳しくはSongleのサイトの解説をごらんください。外部埋め込みプレイヤーを使うと、JavaScriptからそのコードの情報が取れるようになるので、以前から興味のあった五度圏での可視化を試してみました。100行未満のソースコードで実現できてとても手軽でした。このデモのソースコードはhttps://github.com/nishio/fifthです。

僕の作った五度圏の可視化にはマニュアルとかがないので簡単に説明:

  • URLの?以降にSongleのURLを入れればその曲が可視化される
  • 外側がメジャーコードの五度圏、内側がマイナーコードの五度圏
  • 赤いマーカーはコードの構成音の五度圏での表示だけど、現時点ではまだセブンスなどには対応しておらず、メジャーまたはマイナーの3音の和音と解釈して表示している。


Songleのコード自動認識にどの程度の誤りがあるのか筆者にはよくわからないので、手動修正回数の多い曲を上ではチョイスしています。他にいい感じに可視化出来る曲が見つかったらぜひ教えて下さい！

追記