Play "C4"

Tone.js example

by bgmort

HTML

<!-- <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script> -->
<script src="https://unpkg.com/tone"></script>
<script src="https://unpkg.com/@tonejs/ui"></script>



<button id="synthA">A</button>
<button id="synthB">B</button>

JavaScript

//create a synth and connect it to the master output (your speakers)
/* var synth = new Tone.Synth().toMaster() */

//play a middle 'C' for the duration of an 8th note
/* const note = () => synth.triggerAttackRelease('C4', '8n') */
/* synth.triggerAttackRelease('E4', '8n') */

/* document.documentElement.addEventListener('mousedown', note); */

var synthA = new Tone.Synth({
  oscillator: {
    type: 'fmsquare',
    modulationType: 'sawtooth',
    modulationIndex: 3,
    harmonicity: 3.4
  },
  envelope: {
    attack: 0.001,
    decay: 0.1,
    sustain: 0.5,
    release: 0.1
  }
}).toMaster()

var synthB = new Tone.Synth({
  oscillator: {
    type: 'triangle8'
  },
  envelope: {
    attack: 2,
    decay: 1,
    sustain: 0.4,
    release: 4
  }
}).toMaster()

//mouse events
document.querySelector('#synthA').addEventListener('mousedown', function() {
  synthA.triggerAttack('C4')
})
document.querySelector('#synthA').addEventListener('mouseup', function() {
  synthA.triggerRelease()
})
document.querySelector('#synthB').addEventListener('mousedown', function() {
  synthB.triggerAttack('C4')
})
document.querySelector('#synthB').addEventListener('mouseup', function() {
  synthB.triggerRelease()
})