strudel/packages/webaudio/examples/repl.html

<div style="position: absolute; top: 0; right: 0; padding: 4px">
  <button id="start" style="margin-bottom: 4px; font-size: 2em">start</button><br />
  <button id="stop" style="font-size: 2em">stop</button>
</div>
<textarea
  style="font-size: 2em; background: #bce865; color: #323230; height: 100%; width: 100%; outline: none; border: 0"
  id="text"
  spellcheck="false"
>
Loading...</textarea
>
<script type="module">
  document.body.style = 'margin: 0';
  // import * as strudel from '@strudel.cycles/core';
  import * as strudel from '../../core/index.mjs';
  import * as util from '../../core/util.mjs';
  import '@strudel.cycles/core/euclid.mjs';
  // import { Scheduler, getAudioContext } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.0.4';
  import { Scheduler, getAudioContext } from '../index.mjs';

  const { cat, State, TimeSpan } = strudel;
  Object.assign(window, strudel); // add strudel to eval scope

  const scheduler = new Scheduler({
    audioContext: getAudioContext(),
    interval: 0.1,
    onEvent: (e) => {
      e.context?.createAudioNode?.(e);
    },
  });

  let initialCode = `sequence(1,2).mul(55/2) // frequencies
.mul(slowcat(1,2))
.mul(slowcat(1,3/2,4/3,5/3).slow(8))
.fast(3)
.velocity(.5)
.wave(cat('sawtooth','square').fast(2))
.adsr(0.01,.02,.5,0.1)
.filter('lowshelf',800,25)
.out()`;

  try {
    const base64 = decodeURIComponent(window.location.href.split('#')[1]);
    initialCode = atob(base64);
  } catch (err) {
    console.warn('failed to decode', err);
  }
  const input = document.getElementById('text');
  input.value = initialCode;
  const evaluate = () => {
    try {
      const pattern = eval(input.value);
      scheduler.setPattern(pattern);
      window.location.hash = '#' + encodeURIComponent(btoa(input.value)); // update url hash
    } catch (err) {
      console.warn(err);
    }
  };
  evaluate();
  input.addEventListener('input', () => evaluate());

  document.getElementById('start').addEventListener('click', () => scheduler.start());
  document.getElementById('stop').addEventListener('click', () => scheduler.stop());
</script>