LoginSignup
1
0

ポリリズムを視覚的に理解できるメトロノームを作った!(JavaScript)

Last updated at Posted at 2021-09-17

ポリリズムを視覚的に理解できるメトロノームを作りました!

実際に、自分がポリリズムを考えるときのイメージに近いものになっています。

ポリリズムって何?

“ポリ(poly)“は、”複数の“、”多数の“などを意味する言葉です。
あの「ポリゴン(多角形)」や「ポリマー(重合体)」の”ポリ“でもあります。

つまり、ポリリズムとは

複数の「リズムのまとまり」が重なって進行しているリズムを指します。

(詳しくはこちら↓)

なぜ作ったのか

現在の記譜法の弱点

music_gakufu_open.png

現在の楽譜は、旋律(メロディー)や和声(コード)を記述するのに適しています。
しかし、律動(リズム)に関しては…ぶっちゃけイマイチな部分もあります。

その中でも大きな問題点が、"対ポリリズム記述性能の低さ"です。

複雑なポリリズムを含む曲は少ないので、困っている人は少ないと思いますけど。笑

…ただ、逆の視点から見れば「楽譜に書きにくいからアイデアが抑圧されている」とも考えられます。
(実際に、旋律(メロディー)や和声(コード)は、現在の記譜法の発展とともに複雑化していった歴史もあります。)

ポリリズムを分かりやすく説明したい

この楽譜に表しにくいポリリズム。

「分かりやすく表せたらいいな~。でも、どうやってプログラム書いたら良いわからん…。」みたいな状態が続いていました。

しかし、独学で少しずつプログラミングの勉強を始めて約4年。

「あれ…今なら作れそうじゃね?」と思ったので、挑戦してみたら…なんとかできました!!

課題(現在は解決済み)

ただ、課題もあります。
端末によっては、(処理が重たいせいか)ちゃんと動かない可能性があるところです。

手持ちのPC(WindowsとMac)から使う分には、ちゃんと動いてる気がします。

…ただ、スマホ(iPnone)から使うと、処理が重たいせいか…ちゃんと動きません。
(友達に試してもらったら、友達のスマホ(Android)は大丈夫っぽかったです。)

あらゆる端末で安定的に動作させる方法を知っている方がいたら、教えていただけるとありがたいです。

ちなみに、現在はメトロノームの音や色付けの切り替えの実行はJavaScriptのsetIntervalを使っています。

main.js
//以下のコードはイメージです。

//メトロノームの音を鳴らしたり色付けをする関数
function metronomePlay(){
 //処理の中身 ホントは100行以上ある
};

//指定した時間(intervalTime)ごとに、setIntervalで関数を実行する。
setInterval(metronomePlay() , intervalTime);

追記

コメントで「Web Audio APIを使ってみたらよいのでは?」と教えていただいたものの、当時は難しくて断念してしまいました。

しかし、2年以上の時を経て、処理をAudio Web Apiを使ったものに修正しました!

これが出来たのは自身のプログラミング能力の向上も多少はありますけど、ChatGPTの存在が大きいです。いやー、ChatGPTってホント便利ですね。

ただ、結果的に元のコードの95%以上を書き直したのでかなり大変でした。笑

でも、新しくプリセット機能状態をURLにコピーできる機能なども追加して、個人的には「オンラインで動作するウェブメトロノームでこれ以上便利なものあるかな?」と思えるクオリティになったので満足です。

ちなみに

変拍子対応のメトロノームも作りました。
こっちも(もしかしたらこっちの方が)便利ですよ。

1
0
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0