Strudel ~ TidalCycles for the web

General
#1

An experiment in making a Tidal using web technologies.

and this is the coolest part of having a Tidal for the web:

To quote the README.md in full:

@strudel.cycles/embed
This package contains a embeddable web component for the Strudel REPL.

Usage
Either install with npm i @strudel.cycles/embed or just use a cdn to import the script:

<script src=“https://unpkg.com/@strudel.cycles/embed@latest”>
<strudel-repl>
<!–
“a4 [a3 c3] a3 c3”.color(‘#F9D649’)
.sub(“<7 12 5 12>”.slow(2))
.off(1/4,x=>x.add(7).color(“#FFFFFF #0C3AA1 #C63928”))
.off(1/8,x=>x.add(12).color(‘#215CB6’))
.slow(2)
.legato(sine.range(0.3, 2).slow(28))
.wave(“sawtooth square”.fast(2))
.filter(‘lowpass’, cosine.range(500,4000).slow(16))
.out()
.pianoroll({minMidi:20,maxMidi:120,background:‘#202124’})
→
</strudel-repl>
Note that the Code is placed inside HTML comments to prevent the browser from treating it as HTML.

and what this means is you can embed a strudel REPL into web pages like they do in the tutorial. And you can also potentially embed strudel REPLs into Discourse posts, if @moderators were to do the necessary. You can see what that looks like in this Tidal Club thread.

Might be kinda fun for lines, eh?

32 Likes
#2

Thanks for sharing! Strudel is still less than one year old, but thanks to the work of Felix Roos, is developing super fast.

Here’s the discourse plugin :slight_smile: GitHub - tidalcycles/discourse-strudel: Strudel plugin for the discourse forum

6 Likes
#3

I’m concerned about the security implications of user-contributed code. Could an attacker create a code snippet that executes arbitrary JS at the click of a button?

#4

@nathan that’s a great question. I asked it over on Tidal Club.

#5

In summary yes, but that code is sandboxed so couldn’t do anything apart from be a bit annoying.

1 Like