Tone - Boop Button

HTML
<button class="button">Boop Me</button>
SCSS
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'; *{ font-family: 'Source Sans Pro', sans-serif; box-sizing: border-box; font-weight: 300; padding: 0; margin: 0; } body { background-color: rgb(40, 45, 50); } .button { border: none; position: fixed; top: calc(50% - 22px); left: calc(50% - 82px); width: 150px; text-align: center; background-color: rgb(0, 240, 168); height: 45px; line-height: 42px; padding: 0 30px; font-size: 20px; border-radius: 30px; color: rgb(40, 45, 50); cursor: pointer; outline: 0; &:hover{ transform: scale(1.1, 1.1); } }
JAVASCRIPT
var button = document.querySelector('.button'); function setupSynth() { window.synth = new Tone.Synth({ oscillator: { type: 'sine', modulationFrequency: 0.5 }, envelope: { attack: 0, decay: 0.2, sustain: 0, release: 0.5, } }).toMaster(); } function boopMe() { if (!window.synth) { setupSynth(); } window.synth.triggerAttackRelease(600, '9n'); } button.addEventListener('touchstart', function(e) { e.stopPropagation(); e.preventDefault(); boopMe(); }); button.addEventListener('mousedown', boopMe);
Expand for more options Login