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