minimal-repl.html

html

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Buildless Vanilla Strudel REPL</title>

  </head>

  <body style="margin: 0; background: #222">

    <div style="display: grid; height: 100vh; grid-template-rows: 32px auto">

      <button id="start" style="width: 100vw; height: 32px">evaluate</button>

      <textarea

        id="text"

        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"

        spellcheck="false"

      ></textarea>

    </div>

    <div id="output"></div>

    <script type="module">

      // TODO: refactor to use newer version without controls import

      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel/core@0.11.0';

      import { mini } from 'https://cdn.skypack.dev/@strudel/mini@0.11.0';

      import { transpiler } from 'https://cdn.skypack.dev/@strudel/transpiler@0.11.0';

      import {

        getAudioContext,

        webaudioOutput,

        initAudioOnFirstClick,

        registerSynthSounds,

      } from 'https://cdn.skypack.dev/@strudel/webaudio@0.11.0';

      const ctx = getAudioContext();

      const input = document.getElementById('text');

      input.innerHTML = getTune();

      const loadModules = evalScope(

        controls,

        import('https://cdn.skypack.dev/@strudel/core@0.11.0'),

        import('https://cdn.skypack.dev/@strudel/mini@0.11.0'),

        import('https://cdn.skypack.dev/@strudel/tonal@0.11.0'),

        import('https://cdn.skypack.dev/@strudel/webaudio@0.11.0'),

);

      const initAudio = Promise.all([initAudioOnFirstClick(), registerSynthSounds()]);

      const { evaluate } = repl({

        defaultOutput: webaudioOutput,

        getTime: () => ctx.currentTime,

        transpiler,

});

      document.getElementById('start').addEventListener('click', async () => {

        await loadModules;

        await initAudio;

        evaluate(input.value);

});

      function getTune() {

        return `samples('github:tidalcycles/dirt-samples')

setcps(1);

stack(

  // amen

  n("0 1 2 3 4 5 6 7")

  .sometimes(x=>x.ply(2))

  .rarely(x=>x.speed("2 | -2"))

  .sometimesBy(.4, x=>x.delay(".5"))

  .s("amencutup")

  .slow(2)

  .room(.5)

  // bass

  sine.add(saw.slow(4)).range(0,7).segment(8)

  .superimpose(x=>x.add(.1))

  .scale('G0 minor').note()

  .s("sawtooth").decay(.1).sustain(0)

  .gain(.4).cutoff(perlin.range(300,3000).slow(8)).resonance(10)

  .degradeBy("0 0.1 .5 .1")

  .rarely(add(note("12")))

  // chord

  note("Bb3,D4".superimpose(x=>x.add(.2)))

  .s('sawtooth').cutoff(1000).struct("<~@3 [~ x]>")

  .decay(.05).sustain(.0).delay(.8).delaytime(.125).room(.8)

  // alien

  s("breath").room(1).shape(.6).chop(16).rev().mask("<x ~@7>")

  n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))

).reset("<x@7 x(5,8)>")`;

    </script>

  </body>

</html>

User Comments

No comments yet.