<h1>十三音鍵盤</h1>
<p>1オクターブ（黒鍵付）</p>
<ul id="piano">
   <li id="C4" class="w_key">ド</li>
   <li id="C#4" class="b_key"></li> 
   <li id="D4" class="w_key">レ</li>
   <li id="D#4" class="b_key"></li> 
   <li id="E4" class="w_key">ミ</li>
   <li id="F4" class="w_key">ファ</li>
   <li id="F#4" class="b_key"></li>
   <li id="G4" class="w_key">ソ</li>
   <li id="G#4" class="b_key"></li>
   <li id="A4" class="w_key">ラ</li>
   <li id="A#4" class="b_key"></li>
   <li id="B4" class="w_key">シ</li>
   <li id="C5" class="w_key">ド</li>
</ul>

h1, p {
  text-align: center;
}

#piano {
  background: #333;
  padding: 10px;
  width: 300px;
  display: block;
  margin: 0 auto;
  position: relative;
}

.w_key {
  background: #FFF;
  border: 0px solid #333;
  width: 34px;
  text-align: center;
  padding:  90px 0 10px;
  display: inline-block;
}

.w_key:hover, 
.b_key:hover {
  opacity: 0.7;
}

.b_key {
  position: absolute;
  z-index: 10;
  top: 10px;
  margin: 0 -20px;
  padding: 0;
  background: #000;
  border: 1px solid #fff;
  color: #fff;
  width: 35px;
  height: 75px;
  text-align: center;
  display: inline-block; 
}

//DOM
var Key = document.querySelectorAll('#piano li');

//シンセ生成
var synth = new Tone.Synth().toMaster();

//鍵盤数分ループ
for (var i = 0; i < Key.length; i++) {
Key[i].addEventListener("click", function () { 
    //ID名取得
    var idName = this.id;
    //音階を代入
    synth.triggerAttackRelease(idName, "8n"); 
}, false);
}