Standalone or embedded strudel

[m-onz]

Apologies if this is annoying or already covered... I notice that the modules are not common js / browserifyable and tightly coupled to react.

[updated] I retract most of this stuff having found the right example code I needed. https://github.com/tidalcycles/strudel/blob/main/packages/core/examples/vanilla.html

I am really enjoying using strudel and I've had a go (and failed) adding p5.js to it in the short time I've been playing around. I would like someway to import the code into my own projects that use common js and other web frameworks (not react). It would be nice if there was a developer agnostic way to import a published minified script so that I can create standalone audio visual pieces.

Lets say you have a piece of strudel code that your happy with and you want a lightweight standalone version of this that can be easily embedded into other websites. Would it be possible to have a developer api like:

<script src="published_standalone_studel_minified_CDN" ></script>
<script>
// or browserified 
// var strudel = require('strudel2') 
var s = strudel()
s,runCode('... your strudel code')
</script>
<pre> the strudel code </pre>

In a very simplistic form... There probably needs to be user interaction for web audio to work in all browser. You can then render the read-only text on the screen or just hear the audio. I understand there is a lot going on under the hood with OSC and webDirt... is this even possible? This would not be as flexible as the repl... it would be like publishing some finished work to share as an audio visual webpage that can be hosted easily by other webpages.

I like the power of strudel but internally there is a lot of complexity... when embedding it I can imagine putting it in an iframe and having that iframe overlayed onto a p5.js canvas which is the kind of thing I want to do. This feels a bit hacky.. due to the complexity of what strudel is doing is not possible to have a reqular minified script import or published file that I can use within my code (using common js modules too if possible).

When I say "developer agnostic" I mean something that can be imported into plain vanilla js websites, choo, react or common js via browserify.

Having looked at the code and documentation it seems that the bit that makes sound from code running the browser is not easily imported into other code because its tightly coupled to the react application. It does not seem obvious or clear how one might create a html page and import script files to build an application without having to run the complex npm dependencies and build chain.

[felixroos]

I notice that the modules are not common js / browserifyable and tightly coupled to react. [...] It would be nice if there was a developer agnostic way to import a published minified script so that I can create standalone audio visual pieces.

the only module that is coupled to react is @strudel.cycles/react, the rest can be used with or without any framework.
You can find a full list of published packages here: https://www.npmjs.com/search?q=%40strudel.cycles

so far strudel packages are esm only, but there are 2 ways you can use it right now in any project:

• import the packages from skypack, see vanilla example (packages in the example are a bit dated)
• use the strudel web component (which uses an iframe)

I plan to add cjs builds in the future though, but it could take a while.. If you don't want to wait / use skypack / use an iframe, I highly encourage you to try vite as a bundler, which is really easy to use and supports esm packages. It is what the strudel REPL uses under the hood. There is also a vite example in the core package (which uses only strudel + vanilla js). You can even build things to a single file (!)

The code required to set up a repl is a bit more involved than what you proposed because the developer has to choose which packages should be used, as there are multiple optional packages. It might make sense to publish one or more umbrella packages that bundle different packages together for easier use.

I understand there is a lot going on under the hood with OSC and webDirt... is this even possible?

There is nothing going on with OSC, nor with webdirt when you use the default output, which only uses the web audio api.

I like the power of strudel but internally there is a lot of complexity

I can understand that this repo seems complex, but if you break it down to the minimal configuration, you only need core and webaudio to generate music. add mini and transpiler if you want concise user code and add tonal if you want to use scales and chords. The other packages add features you probably won't need.

The purpose of the different packages is to simplify / encapsulate different features and dependencies into opt in modules. This ensures free experimentation in development without needing to worry about size. For example, you could add a p5 module that only loads p5 if it is used. same happens for csound for example.

Having looked at the code and documentation it seems that the bit that makes sound from code running the browser is not easily imported into other code because its tightly coupled to the react application.

The bit that makes the sound is the webaudio package, which has only the core package as a dependency. The webaudioOutput function will play a hap (as returned from Pattern.queryArc) at a given point in time. But you don't need to manually query the active Pattern when using the repl function (as shown in the vanilla example or vite example), you just need to pass the webaudioOutput as defaultOutput to repl. Besides the examples, those functions are not properly documented (yet). If you want to learn more about the general working principle of the repl, there is this page.

It does not seem obvious or clear how one might create a html page and import script files to build an application without having to run the complex npm dependencies and build chain.

In the end, I agree that it would be really nice (especially for beginners / non-coders) to have a single script that just contains everything you need to run strudel code!
Please be aware that this project is only one year old (of knee deep development) and it is still in its late experimental phase
As you're one of the first handful of people trying to use strudel in the wild, I am happy to hear about any challenges you face / questions / ideas you have to improve it!

[m-onz]

Thanks very much for the detailed answer and addressing all the points I mentioned. It all makes sense and its fair enough that its a new project so you can't please everyone straight away. This is subjective opinions about a developer API based around the existing modules that is purely a helper layer so I think it can be achieved easily in many different ways.

I will try to create a static js file suitable for distribution by CDN that I can use it to embed published strudels into webpages along with visuals of some kind. I have enough info to attempt this and I will paste a code snippet here once I have something. I will see what I can come up with in the next few days.

[m-onz]

I've managed to get it to work based on your vanilla example... that was exactly what I was looking for! I missed the examples within the packages folder. Apologies I didn't really need to start a discussion and you have already extracted the core bits I needed to make a standalone audio visual webpage code on github.

Thanks very much!

[felixroos]

cjs builds are on the way ... #396

[m-onz]

Nice 1. I will check it out once its merged in