<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 btnC4 = document.getElementById("C4");
var btnD4 = document.getElementById("D4");
var btnE4 = document.getElementById("E4");
var btnF4 = document.getElementById("F4");
var btnG4 = document.getElementById("G4");
var btnA4 = document.getElementById("A4");
var btnB4 = document.getElementById("B4");
var btnC5 = document.getElementById("C5");


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

//ド（下）が8分音符の長さ鳴る
btnC4.addEventListener("click", function () { 
synth.triggerAttackRelease("C4", "8n"); 
}, false);

//レが8分音符の長さ鳴る
btnD4.addEventListener("click", function () { 
synth.triggerAttackRelease("D4", "8n"); 
}, false);

//ミが8分音符の長さ鳴る
btnE4.addEventListener("click", function () { 
synth.triggerAttackRelease("E4", "8n"); 
}, false);

//ファが8分音符の長さ鳴る
btnF4.addEventListener("click", function () { 
synth.triggerAttackRelease("F4", "8n"); 
}, false);

//ソが8分音符の長さ鳴る
btnG4.addEventListener("click", function () { 
synth.triggerAttackRelease("G4", "8n"); 
}, false);

//ラが8分音符の長さ鳴る
btnA4.addEventListener("click", function () { 
synth.triggerAttackRelease("A4", "8n"); 
}, false);

//シが8分音符の長さ鳴る
btnB4.addEventListener("click", function () { 
synth.triggerAttackRelease("B4", "8n"); 
}, false);

//ド（上）が8分音符の長さ鳴る
btnC5.addEventListener("click", function () { 
synth.triggerAttackRelease("C5", "8n"); 
}, false);

//じょ、冗長やないかぁ〜〜〜い！！（汗