e01df49Embeddable <toy-instrument-sim> widget (src/embed.ts): 3D model, replay and audio from the shared cache, or run in the browser and stored with the passcode; cache results as light and frames entries (CACHE_VERSION 2); instrument configs and link settings shared by the page and the widgetJeremy Magland 1
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Embed test · Toy instruments</title>
7 <!-- Dev server only (npm run dev, then /embed.html): <toy-instrument-sim> on a page
8 styled like jeremy.magland.org, with a light and a dark theme. -->
9 <style>
10 :root { --bg: #fff; --bg-code: #f5f5f5; --text: #1a1a1a; --text-muted: #666; --link: #1a5276; --border: #e0e0e0; color-scheme: light; }
11 :root[data-theme='dark'] { --bg: #14161a; --bg-code: #1f2329; --text: #d7dade; --text-muted: #9199a3; --link: #7cb8ff; --border: #2b3037; color-scheme: dark; }
12 body { background: var(--bg); color: var(--text); font: 17px/1.65 Georgia, serif; max-width: 42rem; margin: 2rem auto; padding: 0 1.25rem; }
13 </style>
14 <script>
15 // ?cache=local: send the shared cache's requests to a local artifact-cache (wrangler dev on port 8797)
16 if (new URLSearchParams(location.search).get('cache') === 'local') {
17 const fetch0 = window.fetch;
18 window.fetch = (url, init) => fetch0(String(url).replace('https://artifact-cache.tempory.net', 'http://localhost:8797'), init);
19 }
20 </script>
21 <script type="module" src="/src/embed.ts"></script>
22 </head>
23 <body>
24 <p><button onclick="document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'">Toggle theme</button></p>
25 <p>A string of beads (default preset):</p>
26 <toy-instrument-sim name="string" settings="#/bead-string?preset=0&gpu=0"></toy-instrument-sim>
27 <p>The default cymbal:</p>
28 <toy-instrument-sim name="cymbal" settings="#/bead-cymbal?preset=0&gpu=1"></toy-instrument-sim>
29 </body>
30</html>