<h1>八音鍵盤</h1>
<p>1オクターブ</p>
<ul id="piano">
   <li id="C4" class="w_key">ド</li>
   <li id="D4" class="w_key">レ</li>
   <li id="E4" class="w_key">ミ</li>
   <li id="F4" class="w_key">ファ</li>
   <li id="G4" class="w_key">ソ</li>
   <li id="A4" class="w_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: 270px;
  display: block;
  margin: 0 auto;
}

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

.w_key:hover {
  opacity: 0.7;
}

//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;
    //アラート表示
    alert(idName);
}, false);
}