1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="icon" type="image/svg+xml" href="https://strudel.cc/favicon.ico" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>@strudel/web REPL Example</title>
8  </head>
9  <body>
10    <div id="app"></div>
11    <button id="a">A</button>
12    <button id="b">B</button>
13    <button id="c">C</button>
14    <button id="stop">stop</button>
15    <script type="module">
16      import { initStrudel } from '@strudel/web';
17      initStrudel({
18        prebake: () => samples('github:tidalcycles/dirt-samples'),
19      });
20
21      const click = (id, action) => document.getElementById(id).addEventListener('click', action);
22      click('a', () => evaluate(`s('bd,jvbass(3,8)').jux(rev)`));
23      click('b', () => s('bd*2,hh(3,4),jvbass(5,8,1)').jux(rev).play());
24      click('c', () => s('bd*2,hh(3,4),jvbass:[0 4](5,8,1)').jux(rev).stack(s('~ sd')).play());
25      click('stop', () => hush());
26    </script>
27  </body>
28</html>