Tone.js Test - JSFiddle

Tone.js example

by abubelinha

HTML

<script src="https://tonejs.github.io/build/Tone.min.js"></script>
<div id="content">
  <button id="C4">C4</button>
  <button id="E4">E4</button>
  <button id="G4">G4</button>
  <button id="B4">B4</button>
</div>

SCSS

#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;
  }
}

JavaScript

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