@strudel/web
v1.1.0
Published
Easy to setup, opiniated bundle of Strudel for the browser.
Downloads
41
Readme
@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:
<!doctype html>
<script src="https://unpkg.com/@strudel/[email protected]"></script>
<button id="play">play</button>
<button id="stop">stop</button>
<script>
initStrudel();
document.getElementById('play').addEventListener('click', () => note('<c a f e>(3,8)').jux(rev).play());
document.getElementById('stop').addEventListener('click', () => hush());
</script>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.
Via npm
If you're using a bundler, you can install the package via npm i @strudel/web, then just import it like:
import { initStrudel } from '@strudel/web';The rest of the code should be the same. Check out vite for a good bundler / dev server.
Loading samples
By default, no external samples are loaded, but you can add them like this:
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.
Evaluating Code
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:
initStrudel();
document.getElementById('play').addEventListener('click',
() => evaluate('note("c a f e").jux(rev)')
);
document.getElementById('play').addEventListener('stop',
() => hush()
);Double vs Single Quotes
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:
- Use the
evaluatefunction, which behaves exactly like the Strudel REPL, interpreting double quoted strings as mini notation. - wrap the string with
m:m("1 2 3").slow(2) - 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!