JSFiddle - React, Tailwind, and code Playground
HTML
<button id="trigger">Web audio!</button>
<div id="timer"></div>
JavaScript
var audioContext;
if (window.AudioContext) {
audioContext = new AudioContext();
}
var startTime = Date.now();
var lastTrigger;
var gain = audioContext.createGain();
gain.value = 1;
gain.connect(audioContext.destination);
var buttonTrigger = document.getElementById('trigger');
buttonTrigger.addEventListener('click', function (event) {
var oscillator = audioContext.createOscillator();
oscillator.type = "square";
oscillator.frequency.value = 100 + (Math.cos(audioContext.currentTime) * 100);
oscillator.connect(gain);
oscillator.start(0);
oscillator.stop(audioContext.currentTime + 0.1);
lastTrigger = Date.now();
});
var timer = document.getElementById('timer');
setInterval(function () {
if (lastTrigger) {
timer.textContent = Date.now() - lastTrigger;
}
}, 1000);