五度圏時計楽器 ClockChord

使い方/How to use | Open on another device
HTML5 canvas not supported
M7
add9
7th
-5/aug
4/4 Key: C BPM=
Select or drop here
Hz
Frequency table
0
envelope
MIDI IN MIDI IN
MIDI OUT MIDI OUT

操作方法（Operation）

和音の出る五度圏時計です。文字盤のコード名をクリックまたはタッチしてみてください。

Chord-soundable circle-of-fifths clock - Click or touch the chord symbol on dial

For PC

マウス操作

時計の文字盤を左クリックすると、そこに書かれているコードが鳴ります。一番外側の調号の部分をクリックするとsus4を鳴らせます。

押したまま円周方向になぞってコードをかき鳴らすこともできます（放射方向には反応しません）。時計回りと反時計回りで音の順序が反転します。

右クリックで7thも鳴らせます（メジャー、マイナー、sus4のどこで右クリックしても7がつきます）。

Shift、Ctrl、Altキーを組み合わせると、さらに多くの種類のコード(M7、6、-5、aug、dim7、9、add9など)を鳴らすことができます。キー割り当てはMIDI Chord Helperと同じです。詳しくはMIDI Chord Helper マニュアル：マウスでコードを鳴らすを参照してください。

鍵盤部分をマウスで押してメロディを弾くこともできます。

PCキーボード操作

文字盤にフォーカスを入れると、PCキーボードの上3列でコードを弾けます（中央は6YHの列）。

矢印キーで調号選択の切り替えも可能です（↑半音UP、↓半音DOWN、←1時間戻る、→1時間進む）。

PCキーボードの場合は右クリックできないので、MIDI Chord Helper と同様にShiftキーで代用できるようにしています。なお、マウスの場合のShiftキーの機能はMetaキー（Windowsキー）に割り当ててみましたが、OSによってはMetaキーをうまく検知できず、本来の機能として思わぬ動作をしてしまう場合があるので注意してください。

鍵盤部分にフォーカスを入れると、PCキーボードのQWERTYの行を白鍵、その上の数字の行を黒鍵として使えます。ただし、PCキーボードによっては同時押しできない組み合わせがあるかも知れません。このような煩わしい制約から逃れるには、後述のMIDI INポートにMIDIキーボードを接続するとよいでしょう。

For smartphone, tablet PC

タッチ操作

スマホやタブレットのようなタッチ操作デバイスの場合も、タップしてコードを鳴らしたり、円周方向になぞってかき鳴らすことができます。

右クリックやShiftキーなどが使えなくても色々なコードを鳴らせるよう、代替手段として電子楽器CAmiDionと同様のシフトボタン（Maj7、add9、7th、-5/aug）が文字盤の下に現れます。 CAmiDionボタン操作表と同じ割当なので、そのままマルチタッチで同時押しを組み合わせ、色々なコードを鳴らすことができます。

鍵盤部分を押してメロディを弾くこともできます（スマホだとちょっと狭いので、できればタブレットがおすすめ）。

調号選択

曲のキーがわかっている場合、Keyプルダウンで調号の♯、♭の数を選択してみてください。 コードの♯、♭の表記が調整され、そのキーにとってよりふさわしい表記に変わります。

【例】

調号を4♯（4時の位置： E/C♯m）に設定した場合
8時の位置が A♭/Fm → G♯/E♯m に変わります。

調号を4♭（8時の位置： A♭/Fm）に設定した場合
4時の位置が E/C♯m → F♭/D♭m に変わります。

このように調号の♯、♭の数が多くなると、白鍵の音階なのに♯、♭がついたり、ときには𝄪(ダブルシャープ)、𝄫(ダブルフラット)が出現することがあります。

トーンインジケーターの色との関係

音を鳴らすと、MIDI Chord Helper と同じようなトーンインジケーターが文字盤に現れますが、この表示色も調号選択に応じて変化します。

スケールに乗っている音（マイナーキーのときはナチュラルマイナースケール）
ピンク色

それ以外の（スケールを外れた）音
♯方向に外れた場合は黄色、♭方向に外れた場合は青色

切り替えボタンの出現条件

次の場合、プルダウン操作なしで簡単に調号を切り替えられるボタンが現れます。

♯、♭の数が5〜7個
異名同音の調号への切り替えボタンが現れます。

選択中の調号とコードの指している時間が異なる
文字盤でルートコードを鳴らし、それによって出現した切り替えボタンを押すだけで、簡単に調を切り替えられます。

表示スタイル選択

ダークモード
Light/Darkの選択ボックスで明暗の切り替えができます。OSやブラウザの設定にも反応します。

文字盤の背景モード
Donut/Pieの2種類から選べます。
Donut
ドーナツモード - 3つのドーナツ状の領域（マイナー、メジャー、sus4）それぞれに色をつけるモードです。 音楽理論のツボのページのように背景モードの選択肢を設置していない場合のデフォルトです。
Pie
パイモード - 4等分したピザパイのような扇形の4つの領域それぞれに色をつけるモードです（当ページにおけるデフォルト）。 MIDI Chord Helperと同様、選んだ調号に応じて背景色が動き、時計回りの順で次のようになります。
  • ピンク色 - その調でよく使う、ダイアトニックコード
  • 黄色 - 短調→長調の同主調転調後によく使う、ホットに聞こえるコード
  • 緑色 - 真裏の調でよく使うコード
  • 青色 - 長調→短調の同主調転調後によく使う、クールに聞こえるコード

MIDIファイル再生

内蔵MIDIシーケンサーにより、MIDIファイルを選択して再生できます。

MIDIファイルをドラッグ＆ドロップまたは選択して読み込ませると、自動的にダークモードになりますので、そのまま再生してみてください。 まるでイルミネーションのようにトーンインジケーターが美しく光り輝き、その曲のコード進行を視覚的に実感できます。

MIDIファイルに調号変更メタイベントが設定されていれば、再生時に所定のタイミングで自動的に調号選択が変更されます。

MIDI IN/OUT 選択

MIDIポートを装備している場合、ポート名のチェックボックスが現れますので、接続したいポートをチェックしてください。

MIDIチャンネルを選択して、MIDI OUTに出力するチャンネルを変更できます。

WebMidiLinkのリンクレベル0にも対応していますので、WebSequencerと接続することで、MIDI再生結果をClockChordのトーンインジケータに表示してコード進行を視覚化しながら鳴らすこともできます。

※ MIDIの規格上、MIDIポートにメタイベントを流すことはできないので、外部のMIDIシーケンサーで再生しても調号の自動選択は働きません。 調号を自動選択させたい場合は、内蔵MIDIシーケンサーで再生してください。

動作環境（Tested Environment）

下記の環境で動作を確認できています。

他にも、こんな時計のページを作りました：抵抗カラーコード時計

[JavaScript source code] [CAmiDion blog catarogy: ClockChord] [Home]