Synth Sounds

Homepage example

by asemahle

HTML

<script src="https://tonejs.github.io/Logo/build/Waveform.js"></script>
<link rel="stylesheet" href="https://tonejs.github.io/assets/css/interface.css">
<script src="https://tonejs.github.io/build/Tone.min.js"></script>
<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>

<tone-demo>
  <tone-button label="Synth A" id="synthA"></tone-button>
  <tone-button label="Synth B" id="synthB"></tone-button>
</tone-demo>

JavaScript

//Synths are capable of a wide range of sounds depending on their settings
var synthA = new Tone.Synth({
  oscillator: {
    type: 'fmsquare',
    modulationType: 'sawtooth',
    modulationIndex: 3,
    harmonicity: 3.4
  },
  envelope: {
    attack: 0.001,
    decay: 0.1,
    sustain: 0.1,
    release: 0.1
  }
}).toMaster()

var synthB = new Tone.Synth({
  oscillator: {
    type: 'triangle8'
  },
  envelope: {
    attack: 0.01,
    decay: 10,
    sustain: 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()
})