Hatena::ブログ(Diary)

西尾泰和のはてなダイアリー

2014-06-15

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

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

f:id:nishiohirokazu:20140615220034p:image

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


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

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

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

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

追記

@きよし(Akiyoshi)@きよし(Akiyoshi) 2014/06/16 22:47 さっそく手元の自作楽器CAmiDionで追いかけてみました。
http://www.yk.rim.or.jp/~kamide/music/chordhelper/hardware/
これもコードボタンが五度圏と同じ並びなので、音だけでなくコードボタンの動きまでぴったり一致してなかなか楽しかったです。

ちなみにこれのJavaアプリ版 http://www.yk.rim.or.jp/~kamide/music/chordhelper/ もあります。同じように一緒に「合奏」して試してみると面白そうですね。

他に可視化すると面白そうな曲といえば、最近よく耳にする Let It Go でしょうか。これはさりげなく1時間つまり五度上がり転調したかのように見せかけて、さりげなく元に戻るという瞬間が多く、いい感じに視覚化できそうです。

nishiohirokazunishiohirokazu 2014/06/17 00:33 きよしさん、はじめまして。
CAmiDionのことはRakuChordのINA氏に聞いて興味深く見させて頂いていました。
Let it goをリストに追加しました。

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/nishiohirokazu/20140615/1402837166