<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/tone/13.1.25/Tone.js