コード表示プログラム - MEMO:はてな支店

入力されたコードに応じて、CSSで書いた鍵盤に、JavaScriptで色をつけるもの。
CGIじゃないので、単にHTMLファイルに保存してブラウザで開けば動く。
使い方は、入力欄にコードをタイプする方式。
入力が正しければ1文字入力毎にどこかの鍵盤に色がつく。

受け付け可能な入力の自分用おぼえがき

ルートの音はA〜Gの大文字で書く
♯は#、♭はbと書く
マイナーコードはマイナスではなくmをつける
6thと7thはそのまま6または7と書く
Δ7はM7と書く
sus4はそのままsus4と書く
(b5)は-5、(#5)は+5と書く
dimは未対応。かわりにm-5を使う
augは未対応。かわりに+5を使う
基本的にIMEがオフの状態で使うことを想定しているので全角の文字は対応してない。

HTML本体

<html>
<head>
<style>
div{
  width: 23px;
  height: 150px;
  z-index: 1;
  border: 1px solid silver;
  position: relative;
  float: left;
}
.c1,.c3,.c6,.c8,.c10{
  width: 12px;
  height: 95px;
  z-index: 2;
  background-color: silver;
  margin: 0px -7px;
}
</style>
<style id=sty></style>
<script>
function decode(chord){
  chord.replace(/([A-G])([b#])?(m)?(M)?([67])?(sus4)?([+-]5)?/,function(a,r,b,m,maj,f,sus4,v){
    var n = "  D EF G A BC".indexOf(r) + (b ? "b #".indexOf(b)-1 : 0);
    var s = ".c" +  n                               % 12
         + ",.c" + (n + (sus4 ? 5 : m ? 3 : 4))     % 12
         + ",.c" + (n + (v ? v/5 : 0) + 7)          % 12
         + (f ? ",.c" + (n + (maj ? 4 : 3) + (f-0)) % 12 : "") + "{background-color: pink}";
    if(document.styleSheets&&!document.styleSheets[1].ownerNode) document.styleSheets[1].cssText = s;
    else document.getElementById('sty').innerHTML = s;
  });
}
window.onload=function(){
  var s="<input onkeyup='decode(this.value)'>";
  for(var i=0;i<24;i++) s+="<div class=c"+(i%12)+"></div>";
  document.body.innerHTML=s;
}
</script>
</head>
</html>

謝辞

鍵盤の表示にtableの代わりにdivを使うというアドバイスに感謝
おかげでかなりすっきりした