Initialize AlphaTab music notation interface

HTML

<!doctype html>
<html>
<body>
<p id="status">Press and hold the left mouse button on a note for ~3 seconds without moving.</p>
<div id="alphaTab">
  \title "Repro"
  .
  :4 0.6 2.6 3.6 5.6 | 0.5 2.5 3.5 5.5
</div>
<script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.js" crossorigin="anonymous"></script>
<script>
  const container = document.getElementById('alphaTab');
  const status = document.getElementById('status');
  const api = new alphaTab.AlphaTabApi(container, {
    core: { tex: true },
    player: {
      playerMode: alphaTab.PlayerMode.EnabledSynthesizer,
      soundFont: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/soundfont/sonivox.sf2',
      enableCursor: true,
      enablePlaybackRangeSelection: true
    }
  });
  alphaTab.Environment.printEnvironmentInfo();

  // After 2 s of holding, shrink the container: alphaTab notices the new width and
  // re-renders, just like when the browser window is resized.
  let timer;
  api.beatMouseDown.on(() => {
    status.textContent = 'Holding... keep holding';
    timer = setTimeout(() => {
      status.textContent = 'Resizing container now (still holding)';
      container.style.width = container.offsetWidth > 500 ? '400px' : '800px';
    }, 2000);
  });
  window.addEventListener('mouseup', () => {
    clearTimeout(timer);
    if (status.textContent.startsWith('Holding')) status.textContent = 'Released too early, hold for ~3 seconds.';
  });
  window.addEventListener('error', e => {
    console.error(e);
    status.textContent = 'Uncaught error: ' + e.message;
  });
</script>
</body>
</html>