var synth = new Tone.AMSynth().toMaster() //attach a listener to all of the buttons document.querySelectorAll('button').forEach(function(button){ button.addEventListener('click', function(e){ //play the note on mouse down if (e.currentTarget.classList.contains('active')) { e.currentTarget.classList.remove('active'); synth.triggerRelease(); } else { e.currentTarget.classList.add('active'); synth.triggerAttack(e.target.textContent); } }); });
<div id="content"> <button id="C4">C4</button> <button id="E4">E4</button> <button id="G4">G4</button> <button id="B4">B4</button> </div>
#content { position: absolute; width: 500px; height: 400px; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); } button { border: 1px solid #666; outline: none; margin: 0; padding: 2em 3em; background-color: white; &.active { background-color: #03f; color: white; } }