@strudel/web NPM

@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>
<button id="play">play</button>
<button id="stop">stop</button>
<script type="module">
  import { initStrudel } from 'https://cdn.skypack.dev/@strudel/web@0.8.2';

  initStrudel();
  document.getElementById('play').addEventListener('click', () => note('<c a f e>(3,8)').play());
  document.getElementById('stop').addEventListener('click', () => hush());
</script>

With the help of skypack, you don't need a bundler nor a server.

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. There will probably be an escapte hatch for that in the future.