ClockChord

How to use | Open on another device
HTML5 canvas not supported
Auto
7 M7 6 -5 aug add9
M7/6
add9
7/6
-5/aug
7:Right click
M7:Shift + Right click
6:Shift
-5:Alt
aug:Alt + sus4
add9:Ctrl
dim7:m6-5
...and any combination available!
MIDI player
4/4
Select or drop here to play
0ei
envelope

五度圏時計楽器 ClockChord

操作方法（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のキーボードでコードを弾けます。6YHの列が、現在の調と同名のコードに割り当てられます。

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

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

文字盤の隅にあるコード入力欄からテキスト入力してコードを鳴らすこともできます。 テキスト入力に限り、「コード名/ベース音」のような分数コード（Slash chord）を鳴らせます。

鍵盤部分にフォーカスを入れると、PCのキーボードで演奏できます。ただし、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個
異名同音の調号への切り替えボタンが現れます。

選択中の調号と鳴らしたコードの表記が異なる
鳴らしたコードと同名のキーに切り替えるためのボタンが出現します。 コードの表記がキーとしては存在しない場合、存在する異名同音のキーに正規化されます（例：G♯→A♭、D♭m→C♯m）。

表示スタイル選択

ダークモード
🌞Light / 🌛Darkのアイコンで明暗の切り替えができます。OSやブラウザの設定にも反応します。

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

MIDIファイル再生

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

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

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

MIDI IN/OUT 選択

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

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

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

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

Songle player

能動的音楽鑑賞サービスSongle（ソングル）に登録されている楽曲を Songle Widget で埋め込み再生できるプレーヤーです。

Songle登録曲の検索

Search欄にキーワードを入力して検索ボタン [🔍Search] を押すと、Songle Widget の楽曲検索 API で検索した結果が表示され、曲名からリンクをたどるだけで直接ClockChordが開きます。

楽曲URLを指定して開く

Songleに登録されている楽曲のURLを指定して Songle Widget を開くには、Songle player の枠に下記の値を入力して[Load]ボタンをクリックします。

  1. 曲のURL
  2. 曲のキー（例：B♭、F♯m など）

転調がある場合のキーの指定方法

入力したキーに追加で、転調位置（ミリ秒[ms]単位）、転調先のキー、この2つを交互にカンマ区切りで指定します。

例：Dm,123456,Bb,234567,F#m

コードやビートが合ってないなど違和感がある場合

ぜひ、Songleのデータを訂正してあげてください。Songleの自動解析は完璧ではないので、自動解析後に誰も訂正していなかったりすると、そういうことがよくあります。

手動でコード演奏したくなったら

Songleで視覚的にコード進行を覚えたので、今度は自分でコード演奏してみたい! …と思ったら、文字盤左下にある Auto のチェックを外してみましょう。Songle Widgetによるコード演奏が止まり、自分で曲に合わせてコード演奏できるようになります。

URL検索パラメータ

ClockChordを開くときに下記のURL検索パラメータを指定できます。

songle
URL欄の入力値を指定します。URLで指定された曲の埋め込まれたSongle Widgetが、ClockChordに最初から埋め込まれた状態で開きます。
※ https://songle.jp/songs/楽曲URL から 楽曲URL の部分を抜き出し、% でエンコードされたままの状態で指定してください。
url
パラメータsongleと同じです。
keysig
Key欄の入力値を指定します。省略した場合、楽曲URLをもとに song_keys.js から検索し、もし見つかればそれが入力値として使われます。
※ シャープとして半角の # を直接指定しても、テキストフラグメントとして解釈され、無視されてしまいます。その場合はシャープ記号 ♯ で代用するか、または %23 のようにパーセントエンコーディングを使ってエスケープする必要があります。
key
パラメータkeysigと同じです。
at
Songle Widgetを開いたときの再生位置（data-song-start-at）を指定します（単位：秒）。chorus を指定すると最初のサビから再生できます。省略した場合は先頭から再生されます。
autoplay
デフォルトではSongle Widgetを開いたときに自動再生しますが、このオプションに 0 を指定することで自動再生をOFFにできます。
loop
Songle Widgetでループ再生したいときに 1 を指定します（デフォルトではループ再生なし）。

動作環境（Tested Environment）

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

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

[JavaScript source code] [Home]