1<!doctype html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <!-- <script src="../../packages/web/dist/index.js"></script> -->
6    <script src="https://unpkg.com/@strudel/web@1.0.3"></script>
7  </head>
8  <body style="background: #222">
9    <button id="a">A</button>
10    <button id="b">B</button>
11    <button id="c">C</button>
12    <button id="stop">stop</button>
13    <script>
14      initStrudel({
15        prebake: () => samples('github:tidalcycles/dirt-samples'),
16      });
17      const click = (id, action) => document.getElementById(id).addEventListener('click', action);
18      click('a', () => evaluate(`s('bd,jvbass(3,8)').jux(rev)`));
19      click('b', () => s('bd*2,hh(3,4),jvbass(5,8,1)').jux(rev).play());
20      click('c', () => s('bd*2,hh(3,4),jvbass:[0 4](5,8,1)').jux(rev).stack(s('~ sd')).play());
21      click('stop', () => hush());
22    </script>
23  </body>
24</html>