見出し画像

コード進行をグラフ化した話


はじめに

この記事は物工/計数 Advent Calendar 2021 18日目です。
この記事では計数工学実験で扱ったテーマの中から、twitterでちょっとウケたものを紹介します。

何をしたのか

タイトルにもある通り、楽曲のコード進行をグラフとして表現しました。

例えば

画像3

こんなのとか

画像4

こんなのです

実装

1. 

何はともあれデータがないとどうにもならないのでまずはスクレイピングです。今回は僕が個人的に信用しているchord wikiのサイトからスクレイピングさせて頂きました。ブラウザからアクセスするとこんな画面に出くわします。

スクリーンショット 2021-12-17 22.25.33

このサイトに対してHTMLソースを表示すると下のようなソースコードが見れます。

スクリーンショット 2021-12-17 22.32.53

このソースに対してAbM7とかBb7とかの文字列をネチネチ拾っていきます。pythonが。pythonはすごいのでなんでもできます。退屈なことはpythonに投げましょう。具体的にはbeautiful soupというライブラリを使いましたが、私も詳しくは知りません。なんかバグる度に強い友人に助けてもらってスクレイピングしました。退屈でないことは強い友人に投げましょう。

これは余談ですがchord wikiのソースの書き方が、同じサイトなのに楽曲によって微妙に異なっていて、その都度条件分岐を追加で書く羽目に陥って発狂でした。また、なぜか私がスクレイピングをしている最中にサイトが落ちて怖かったです。1分に一回程度しかアクセスしてないので絶対に私は悪くないんですが、大学のpcで、大学のwifiからアクセスしてたり、人生初のスクレイピングだったこともあって涙目でした。

2.

ともあれ、これでコードとキーが取得できたので後はデータを整形していきます。

画像5

今回はコードのルートの音、例えばAadd9のAの部分しか使わないので残りは取り除いておきます。余ったadd9は後日スタッフが美味しく頂きました。また、あまりにグラフを複雑にしすぎてもなにがなにかわからなくなるので登場頻度の低い進行は刈りとっておきます。さらに楽曲間でグラフの比較がしやすいように、Ebメジャーだろうがマイナーキーだろうが全てCメジャーにキーを統一します。整形したものがこちらです(ここであらかじめ用意しておいた配列を取り出す)。

3. 

グラフ描画にはGraphvizを使用します。データ整形のついでにデータ形式に合うように出力しておきましょう。例によってGraphvizについては詳しくは知りません。学科が使えというので使うまでです。楽曲中で使われたコード進行の回数を併記したりそれに合わせて矢印を太くしたり、調べると色々できました。

結果

以上の方法を使って、色々な楽曲をグラフ描画してみました。

まずは記事のサムネにもなってる『夜に駆ける』です。

画像6

3から6の進行が多いですね。

次にあいみょんの『マリーゴールド』です。

画像7

カノン進行は五角形の閉ループと三角形の完全グラフができて図形が綺麗ですね。

これでなにがわかるの?

なにもわかりません。苦心惨憺してレポートにはあることないこと書きましたが、いやないことは書いてませんが、ぶっちゃけ人間が見て見栄えがいいぐらいだと思います。真面目にコード進行を解析するなら情報を落としてまで綺麗なグラフにするよりも元配列のまま計算機の圧倒的処理能力に投げちゃった方が色々と汎用性は高いと思います。特に、2個より前のコードからの遷移情報を落としているのがかなり痛いです。グラフ表現の利点としては、人間が見て一目で大まかな進行が把握できる(ほんまか?)ぐらいで手打ちにしましょう。

ソースコード

プログラミングの作法を何も知らない書き散らしですが、今回使用したソースコードを共有しておきます。一応URLさえ入力すれば動くはずなので興味があれば遊んでみてください。コードが走らない/使い方がわからない/何をどうやればこんな汚いコードが書けるんだ殺すぞ等あればお気軽にご連絡ください。

https://drive.google.com/file/d/150xu2xG7PeQsn6fRcIhiYZAXTQYVNTdc/view?usp=sharing

https://drive.google.com/file/d/1nxgfRHahjBewHHJjUozItgiz4A8cTNNR/view?usp=sharing




この記事が気に入ったらサポートをしてみませんか?