コード進行を五度圏で可視化してみた
Songleの外部埋め込みプレイヤーがJavaScriptでカスタマイズできるので、それを利用して五度圏の可視化をするデモを作ってみました。
●スピッツの﹁ロビンソン﹂
●中島みゆきの﹁地上の星﹂
●きゃりーぱみゅぱみゅの﹁ファッションモンスター﹂
ロビンソンはコードの動きがわりとおとなしいですね。一方ファッションモンスターはGmFmを交互にピコピコ動いてダンスを見ているような楽しさが。
Songleは音楽の理解を支援するサービスで、楽曲からコード進行などの情報を抽出し、可視化したり、コード進行を強調して再生したりしてくれます。詳しくはSongleのサイトの解説をごらんください。外部埋め込みプレイヤーを使うと、JavaScriptからそのコードの情報が取れるようになるので、以前から興味のあった五度圏での可視化を試してみました。100行未満のソースコードで実現できてとても手軽でした。このデモのソースコードはhttps://github.com/nishio/fifthです。 僕の作った五度圏の可視化にはマニュアルとかがないので簡単に説明: ●URLの?以降にSongleのURLを入れればその曲が可視化される ●外側がメジャーコードの五度圏、内側がマイナーコードの五度圏 ●赤いマーカーはコードの構成音の五度圏での表示だけど、現時点ではまだセブンスなどには対応しておらず、メジャーまたはマイナーの3音の和音と解釈して表示している。
Songleのコード自動認識にどの程度の誤りがあるのか筆者にはよくわからないので、手動修正回数の多い曲を上ではチョイスしています。他にいい感じに可視化出来る曲が見つかったらぜひ教えて下さい！ 追記
ロビンソンはコードの動きがわりとおとなしいですね。一方ファッションモンスターはGmFmを交互にピコピコ動いてダンスを見ているような楽しさが。
Songleは音楽の理解を支援するサービスで、楽曲からコード進行などの情報を抽出し、可視化したり、コード進行を強調して再生したりしてくれます。詳しくはSongleのサイトの解説をごらんください。外部埋め込みプレイヤーを使うと、JavaScriptからそのコードの情報が取れるようになるので、以前から興味のあった五度圏での可視化を試してみました。100行未満のソースコードで実現できてとても手軽でした。このデモのソースコードはhttps://github.com/nishio/fifthです。 僕の作った五度圏の可視化にはマニュアルとかがないので簡単に説明: ●URLの?以降にSongleのURLを入れればその曲が可視化される ●外側がメジャーコードの五度圏、内側がマイナーコードの五度圏 ●赤いマーカーはコードの構成音の五度圏での表示だけど、現時点ではまだセブンスなどには対応しておらず、メジャーまたはマイナーの3音の和音と解釈して表示している。
Songleのコード自動認識にどの程度の誤りがあるのか筆者にはよくわからないので、手動修正回数の多い曲を上ではチョイスしています。他にいい感じに可視化出来る曲が見つかったらぜひ教えて下さい！ 追記
●ポルノグラフィティの﹁サウダージ﹂ sus4とかがガンガン出てくる。現状ではsus4をメジャーの五度圏として表示しているが修正が必要だろうか、どう修正すべきだろうか。
●きゃりーぱみゅぱみゅの﹁インベーダーインベーダー﹂ ファッションモンスターに比べてコード進行がおとなしい。8時〜10時の区間をウロウロしていて、たまに違うコードが挟まっている。
●John Coltraneの﹁Giant Steps﹂ これは長3度の遷移を多用した曲で、五度圏で見ると正三角形のパターンが現れる面白い曲らしい。see コルトレーン・チェンジズ - Wikipedia。残念ながら現時点ではSongleのコード認識が広い範囲で失敗している。序盤の三角形パターンは観察できる。面白い。thanks id:ymotongpoo
●バッハ﹁主よ人の望みの喜びよ﹂を初音ミクに歌わせてみた おおよそ0時から2時までの範囲がメインだけど、途中のちょっと雰囲気違うところでは11時から5時まで広がっている。ところで時々C・G周辺の音の時に反対側の7時のC#が出るのは誤認識なのかあえてのカウンターなのかどっちだろう。
●Let it go
