mirror of
https://codeberg.org/uzu/strudel
synced 2026-07-13 06:19:33 -04:00
Jade (Rose) Rowland
d198910a86
- @strudel/codemirror@1.2.7 - @strudel/core@1.2.6 - @strudel/csound@1.2.7 - @strudel/draw@1.2.6 - @strudel/embed@1.1.2 - @strudel/gamepad@1.2.6 - @strudel/hydra@1.2.6 - @strudel/midi@1.2.7 - @strudel/mini@1.2.6 - mondolang@1.1.2 - @strudel/mondo@1.1.6 - @strudel/motion@1.2.6 - @strudel/mqtt@1.2.6 - @strudel/osc@1.3.1 - @strudel/reference@1.2.2 - @strudel/repl@1.2.8 - @strudel/sampler@0.2.4 - @strudel/serial@1.2.6 - @strudel/soundfonts@1.2.7 - superdough@1.2.7 - supradough@1.2.5 - @strudel/tonal@1.2.6 - @strudel/transpiler@1.2.6 - vite-plugin-bundle-audioworklet@0.1.2 - @strudel/web@1.2.7 - @strudel/webaudio@1.2.7 - @strudel/xen@1.2.6
@strudel/embed
This package contains a embeddable web component for the Strudel REPL.
Usage via Script Tag
Use this code in any HTML file:
<script src="https://unpkg.com/@strudel/embed@latest"></script>
<strudel-repl>
<!--
setcps(1)
n("<0 1 2 3 4>*8").scale('G4 minor')
.s("gm_lead_6_voice")
.clip(sine.range(.2,.8).slow(8))
.jux(rev)
.room(2)
.sometimes(add(note("12")))
.lpf(perlin.range(200,20000).slow(4))
-->
</strudel-repl>
This will load the strudel website in an iframe, using the code provided within the HTML comments <!-- -->.
The HTML comments are needed to make sure the browser won't interpret it as HTML.
Alternatively you can create a REPL from JavaScript like this:
<script src="https://unpkg.com/@strudel/embed@1.0.2"></script>
<div id="strudel"></div>
<script>
let editor = document.createElement('strudel-repl');
editor.setAttribute(
'code',
`setcps(1)
n("<0 1 2 3 4>*8").scale('G4 minor')
.s("gm_lead_6_voice")
.clip(sine.range(.2,.8).slow(8))
.jux(rev)
.room(2)
.sometimes(add(note("12")))
.lpf(perlin.range(200,20000).slow(4))`,
);
document.getElementById('strudel').append(editor);
</script>
When you're using JSX, you could also use the code attribute in your markup:
<script src="https://unpkg.com/@strudel/embed@1.0.2"></script>
<strudel-repl code={`
setcps(1)
n("<0 1 2 3 4>*8").scale('G4 minor')
.s("gm_lead_6_voice")
.clip(sine.range(.2,.8).slow(8))
.jux(rev)
.room(2)
.sometimes(add(note("12")))
.lpf(perlin.range(200,20000).slow(4))
`}></strudel-repl>