import { animate, scrambleText, utils } from 'animejs';

const [ $p ] = utils.$('p');
const [ $btn ] = utils.$('button');

const audioCtx = new AudioContext();
let soundEnabled = false;

const tickSound = () => {
  if (!soundEnabled) return;
  const t = audioCtx.currentTime;
  const o = audioCtx.createOscillator();
  const g = audioCtx.createGain();
  o.type = 'sine';
  o.frequency.setValueAtTime(4000 + Math.random() * 400, t);
  g.gain.setValueAtTime(0.001, t);
  g.gain.linearRampToValueAtTime(0.035, t + 0.001);
  g.gain.exponentialRampToValueAtTime(0.001, t + 0.003);
  o.connect(g).connect(audioCtx.destination);
  o.start(t);
  o.stop(t + 0.003);
};

$btn.addEventListener('click', () => {
  soundEnabled = !soundEnabled;
  if (soundEnabled) audioCtx.resume();
  $btn.textContent = soundEnabled ? 'Sound ON' : 'Sound OFF';
});

animate($p, {
  innerHTML: scrambleText({ onChange: tickSound }),
  loop: true,
  loopDelay: 1500,
});

<div class="large row">
  <p class="text-s text-mono">Use the onChange callback to trigger a tick sound on every character update.</p>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>Sound OFF</button>
  </fieldset>
</div>