@strudel/web

This package provides an easy to use bundle of multiple strudel packages for the web.

Usage

Save this code as a .html file and double click it:

``html


play
stop

`

As soon as you call initStrudel(), all strudel functions are made available.
In this case, we are using the note function to create a pattern.
To actually play the pattern, you have to append .play() to the end.

Note: Due to the Autoplay policy, you can only play audio in a browser after a click event.

$3

If you're using a bundler, you can install the package via npm i @strudel/web, then just import it like:

`js
import { initStrudel } from '@strudel/web';
`

The rest of the code should be the same. Check out vite for a good bundler / dev server.

$3

By default, no external samples are loaded, but you can add them like this:

`js
initStrudel({
prebake: () => samples('github:tidalcycles/dirt-samples'),
});

document.getElementById('play').addEventListener('click',
() => s("bd sd").play()
)
`

You can learn more about the samples function here.

$3

Instead of creating patterns directly in JS, you might also want to take in user input and turn that into a pattern.
This is called evaluation: Taking a piece of code and executing it on the fly.

To do that, you can use the evaluate function:

`js
initStrudel();
document.getElementById('play').addEventListener('click',
() => evaluate('note("c a f e").jux(rev)')
);
document.getElementById('stop').addEventListener('click',
() => hush()
);
`

$3

There is a tiny difference between the Strudel REPL and @strudel/web.
In the REPL you can use 'single quotes' for regular JS strings and "double quotes" for mini notation patterns.
In @strudel/web, it does not matter which types of quotes you're using.

This difference means that you cannot call pattern methods on raw strings, for example "1 2 3".slow(2).
To make it work you can either:

1. Use the evaluate function, which behaves exactly like the Strudel REPL, interpreting double quoted strings as mini notation.
2. wrap the string with m: m("1 2 3").slow(2)
3. wrap the string in a control function: n("1 2 3").slow(2)` depending on your context.

More Examples

Check out the examples folder for more examples, both using plain html and vite!