コード進行をランダムに生成し、実際に演奏させるサイトを作りました

コード進行をランダムに生成し、実際に演奏させるサイトを作りました

コード進行をランダムに生成し、演奏させるサイトRandom Chordboxを生んだので、紹介と宣伝を行います。

大体の説明は動画を見ていただいた方が早いと思いますが、そう、放置しているだけで色々なコード進行を生成します。

Advertisement

こんな方に使ってほしい

勉強のために作ったサービスで「ターゲット」と言えるほど大層なものはありませんが、コードがランダムに生成される性質上、以下のような場合に力になってくれるかもしれません。

1.作曲時のコード進行がマンネリしてきたとき、コード進行が素直過ぎるので一部分だけ修正したい時など

※バックグラウンドでも動くので、例えばTwitterをしながらでもアレンジすることができるよ☆

2.コードにあわせて即興演奏したいとき

※バッキングしてくれるコードのメロディや楽器を選択することもできるよ☆

3指定されたコードを、即座に抑える練習

※ランダムに色々なコードがでてくるから、練習にもいいね☆

機能紹介

ざっくりと紹介すると、

1.入力したコードを色々な音で再生できる、

2.コードがランダムに生成される

って感じです。

動画を見ることができない方に向けて、こちらでも順に紹介していきます。

1.選択したコード音を再生する

①水色のボックスをクリック(タップ)すると、コードを入力することが出来ます。

②コードが選択されているボックスの再生ボタン(‣のボタン)を押すと、コードが再生されます。

2.コードのランダム入力

①「ランダム入力」を押すと、各ボックスにランダムにコードが入力されていきます。

②コードをそのままにしておきたいボックスは、「Lock」することで、固定することが出来ます。

③ランダム入力で選定されるコードは、ページ下部で絞り込みを行うこともできます。

※例えば、「m7」と「dim7」のみチェックが入っている場合は、この2つのコードしか選定されません。

3.ランダムリピート再生

「Play」ボタンを押すとコードが順に演奏されます。

また、Lockしていないボックスは、リピートのたびにコードがランダムに選定されます。

そのため、リピートされる度に違うコード進行が生まれます。

ランダム入力を防ぎたいボックスはLockすることで固定されるため、「ここだけマンネリしてるから変えたいなー」って場合は、その部分だけ変更されるように他の箇所を全部Lockしておくと良いです。

※ページ上部のオールLockや、オール解除で、一括で操作することが出来ます。

4.サンプルコード入力

①音楽の知識が無い方でも楽しめるように、よく使われるコード進行や実際の曲のコード進行を一発で入力できます。

もちろん、そこから少しずつアレンジしていくことも可能です。

ボタン一つでいい感じのコード進行を設定出来るので、遊んでみてください。

5.その他再生中の補助機能

①「メニュー」ボタンより再生中の音声の設定を変更することが出来ます。

・楽器の変更

・メロディの変更

・ドラムパート、BPMの変更

また、「それっぽい雰囲気」になるように一括で、上記を設定できるプリセットもあります。

 

※以下、アップデートで追加した内容

6.コードの鍵盤表示

「鍵盤を表示」ボタンを選択すると、画面下部に鍵盤が表示され、コードの構成音を表示してくれます。

即興でコードを押さえる練習に使えそうですね。

後書き

ウェブサービスの作成というかプログラミング自体が初めてだったので、ググっては困っての繰り返しでした。

WebAudioAPIははなから諦めていたので、試しにaudio要素で作成したところ、リズムが全然刻まれなかった…

なので、最初はリピート再生等も追加しない予定でした。

ですが、Tone.jsに出会い、個人的に一本満足行くものが作れました。本当に大大感謝です。

※Tone.jsの使い方はこちらで紹介しています

この記事で、Random Chordboxに興味を持っていただけた方は是非遊んで頂けると嬉しいです。