<h1>一音鍵盤</h1>
<div id="piano">
   <div id="do">ド</div>
</div>

h1 {
  text-align: center;
}

#piano {
  background: #333;
  padding: 10px;
  width: 30px;
  display: block;
  margin: 0 auto;

}

#do {
  background: #FFF;
  border: 1px solid #333;
  width: 30px;
  text-align: center;
  padding: 50px 0;
}

#do:hover {
  opacity: 0.7;
}

//DOM
var btn = document.getElementById("do");

//イベントリスナ
btn.addEventListener("click", function () { 
//シンセ生成
var synth = new Tone.Synth().toMaster();
//ドが8分音符の長さ鳴る
synth.triggerAttackRelease("C4", "8n"); 
}, false);