1# @strudel/web
2
3This package provides an easy to use bundle of multiple strudel packages for the web.
4
5## Usage
6
7Save this code as a `.html` file and double click it:
8
9```html
10<!doctype html>
11<script src="https://unpkg.com/@strudel/web@1.0.3"></script>
12<button id="play">play</button>
13<button id="stop">stop</button>
14<script>
15  initStrudel();
16  document.getElementById('play').addEventListener('click', () => note('<c a f e>(3,8)').jux(rev).play());
17  document.getElementById('stop').addEventListener('click', () => hush());
18</script>
19```
20
21As soon as you call `initStrudel()`, all strudel functions are made available.
22In this case, we are using the `note` function to create a pattern.
23To actually play the pattern, you have to append `.play()` to the end.
24
25Note: Due to the [Autoplay policy](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy), you can only play audio in a browser after a click event.
26
27### Via npm
28
29If you're using a bundler, you can install the package via `npm i @strudel/web`, then just import it like:
30
31```js
32import { initStrudel } from '@strudel/web';
33```
34
35The rest of the code should be the same. Check out [vite](https://vitejs.dev/) for a good bundler / dev server.
36
37### Loading samples
38
39By default, no external samples are loaded, but you can add them like this:
40
41```js
42initStrudel({
43  prebake: () => samples('github:tidalcycles/dirt-samples'),
44});
45
46document.getElementById('play').addEventListener('click', 
47  () => s("bd sd").play()
48)
49```
50
51You can learn [more about the `samples` function here](https://strudel.cc/learn/samples#loading-custom-samples).
52
53### Evaluating Code
54
55Instead of creating patterns directly in JS, you might also want to take in user input and turn that into a pattern.
56This is called evaluation: Taking a piece of code and executing it on the fly.
57
58To do that, you can use the `evaluate` function:
59
60```js
61initStrudel();
62document.getElementById('play').addEventListener('click', 
63  () => evaluate('note("c a f e").jux(rev)')
64);
65document.getElementById('stop').addEventListener('click', 
66  () => hush()
67);
68```
69
70### Double vs Single Quotes
71
72There is a tiny difference between the [Strudel REPL](https://strudel.cc/) and `@strudel/web`.
73In the REPL you can use 'single quotes' for regular JS strings and "double quotes" for mini notation patterns.
74In `@strudel/web`, it does not matter which types of quotes you're using.
75
76This difference means that you cannot call pattern methods on raw strings, for example `"1 2 3".slow(2)`.
77To make it work you can either:
78
791. Use the `evaluate` function, which behaves exactly like the Strudel REPL, interpreting double quoted strings as mini notation.
802. wrap the string with `m`: `m("1 2 3").slow(2)`
813. wrap the string in a control function: `n("1 2 3").slow(2)` depending on your context.
82
83## More Examples
84
85Check out the examples folder for more examples, both using plain html and vite!