<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);
This Pen doesn't use any external CSS resources.