<h1>三音鍵盤</h1>
<p>Cメジャー</p>
<div id="piano">
   <div id="c4" class="w_key">ド</div>
   <div id="e4" class="w_key">ミ</div>
   <div id="g4" class="w_key">ソ</div>
</div>

h1, p {
  text-align: center;
}

#piano {
  background: #333;
  padding: 10px;
  width: 100px;
  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 btnDo = document.getElementById("c4");
var btnMi = document.getElementById("e4");
var btnSo = document.getElementById("g4");

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

//イベントリスナ（ド）
btnDo.addEventListener("click", function () { 
//ドが8分音符の長さ鳴る
synth.triggerAttackRelease("C4", "8n"); 
}, false);

//イベントリスナ（ミ）
btnMi.addEventListener("click", function () { 
//ミが8分音符の長さ鳴る
synth.triggerAttackRelease("E4", "8n"); 
}, false);

//イベントリスナ（ソ）
btnSo.addEventListener("click", function () { 
//ソが8分音符の長さ鳴る
synth.triggerAttackRelease("G4", "8n"); 
}, false);