mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-11 05:38:34 +00:00
add @strudel/web umbrella package + example
This commit is contained in:
Felix Roos
parent
b27a58df7e
commit
3b631cb6af
35
packages/web/README.md
Normal file
35
packages/web/README.md
Normal file
@ -0,0 +1,35 @@
|
||||
# @strudel/web
|
||||
|
||||
This package provides an easy to use bundle of multiple strudel packages for the web.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { repl } from '@strudel/web';
|
||||
|
||||
const strudel = repl();
|
||||
|
||||
document.getElementById('play').addEventListener('click',
|
||||
() => strudel.evaluate('note("c a f e").jux(rev)')
|
||||
);
|
||||
```
|
||||
|
||||
Note: 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.
|
||||
|
||||
### Loading samples
|
||||
|
||||
By default, no external samples are loaded, but you can add them like this:
|
||||
|
||||
```js
|
||||
import { repl, samples } from '@strudel/web';
|
||||
|
||||
const strudel = repl({
|
||||
prebake: () => samples('github:tidalcycles/Dirt-Samples/master'),
|
||||
});
|
||||
|
||||
document.getElementById('play').addEventListener('click',
|
||||
() => strudel.evaluate('s("bd,jvbass(3,8)").jux(rev)')
|
||||
);
|
||||
```
|
||||
|
||||
You can learn [more about the `samples` function here](https://strudel.tidalcycles.org/learn/samples#loading-custom-samples).
|
||||
24
packages/web/examples/repl-example/.gitignore
vendored
Normal file
24
packages/web/examples/repl-example/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
29
packages/web/examples/repl-example/index.html
Normal file
29
packages/web/examples/repl-example/index.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="https://strudel.tidalcycles.org/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@strudel/web REPL Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<button id="a">A</button>
|
||||
<button id="b">B</button>
|
||||
<button id="c">C</button>
|
||||
<button id="stop">stop</button>
|
||||
<script type="module">
|
||||
import { repl, samples } from '@strudel/web';
|
||||
|
||||
const strudel = repl({
|
||||
prebake: () => samples('github:tidalcycles/Dirt-Samples/master'),
|
||||
});
|
||||
|
||||
const click = (id, action) => document.getElementById(id).addEventListener('click', action);
|
||||
click('a', () => strudel.evaluate('s("bd,jvbass(3,8)").jux(rev)'));
|
||||
click('b', () => strudel.evaluate('s("bd*2,hh(3,4),jvbass(5,8,1)").jux(rev)'));
|
||||
click('c', () => strudel.evaluate('s("bd*2,hh(3,4),jvbass:[0 4](5,8,1)").jux(rev).stack(s("~ sd"))'));
|
||||
click('stop', () => strudel.stop());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
packages/web/examples/repl-example/package.json
Normal file
18
packages/web/examples/repl-example/package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "repl-example",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@strudel/web": "workspace:*"
|
||||
}
|
||||
}
|
||||
46
packages/web/package.json
Normal file
46
packages/web/package.json
Normal file
@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "@strudel/web",
|
||||
"version": "0.8.0",
|
||||
"description": "Easy to setup, opiniated bundle of Strudel for the browser.",
|
||||
"main": "repl.mjs",
|
||||
"publishConfig": {
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"prepublishOnly": "npm run build"
|
||||
},
|
||||
"type": "module",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/tidalcycles/strudel.git"
|
||||
},
|
||||
"keywords": [
|
||||
"tidalcycles",
|
||||
"strudel",
|
||||
"pattern",
|
||||
"livecoding",
|
||||
"algorave"
|
||||
],
|
||||
"author": "Felix Roos <flix91@gmail.com>",
|
||||
"contributors": [
|
||||
"Alex McLean <alex@slab.org>"
|
||||
],
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"bugs": {
|
||||
"url": "https://github.com/tidalcycles/strudel/issues"
|
||||
},
|
||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||
"dependencies": {
|
||||
"@strudel.cycles/core": "workspace:*",
|
||||
"@strudel.cycles/webaudio": "workspace:*",
|
||||
"@strudel.cycles/soundfonts": "workspace:*",
|
||||
"@strudel.cycles/mini": "workspace:*",
|
||||
"@strudel.cycles/tonal": "workspace:*",
|
||||
"@strudel.cycles/transpiler": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.3.3"
|
||||
}
|
||||
}
|
||||
38
packages/web/repl.mjs
Normal file
38
packages/web/repl.mjs
Normal file
@ -0,0 +1,38 @@
|
||||
export * from '@strudel.cycles/core';
|
||||
export * from '@strudel.cycles/webaudio';
|
||||
export * from '@strudel.cycles/soundfonts';
|
||||
export * from '@strudel.cycles/transpiler';
|
||||
export * from '@strudel.cycles/mini';
|
||||
export * from '@strudel.cycles/tonal';
|
||||
export * from '@strudel.cycles/webaudio';
|
||||
import { repl as _repl, evalScope, controls } from '@strudel.cycles/core';
|
||||
import { initAudioOnFirstClick, getAudioContext, registerSynthSounds, webaudioOutput } from '@strudel.cycles/webaudio';
|
||||
import { registerSoundfonts } from '@strudel.cycles/soundfonts';
|
||||
import { transpiler } from '@strudel.cycles/transpiler';
|
||||
|
||||
async function prebake(userPrebake) {
|
||||
const loadModules = evalScope(
|
||||
evalScope,
|
||||
controls,
|
||||
import('@strudel.cycles/core'),
|
||||
import('@strudel.cycles/mini'),
|
||||
import('@strudel.cycles/tonal'),
|
||||
import('@strudel.cycles/webaudio'),
|
||||
);
|
||||
await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts(), userPrebake?.()]);
|
||||
}
|
||||
|
||||
export function repl(options = {}) {
|
||||
const prebaked = prebake(options?.prebake);
|
||||
initAudioOnFirstClick();
|
||||
return _repl({
|
||||
defaultOutput: webaudioOutput,
|
||||
getTime: () => getAudioContext().currentTime,
|
||||
transpiler,
|
||||
...options,
|
||||
beforeEval: async (args) => {
|
||||
options?.beforeEval?.(args);
|
||||
await prebaked;
|
||||
},
|
||||
});
|
||||
}
|
||||
35
pnpm-lock.yaml
generated
35
pnpm-lock.yaml
generated
@ -471,6 +471,41 @@ importers:
|
||||
specifier: ^0.28.0
|
||||
version: 0.28.0(@vitest/ui@0.28.0)
|
||||
|
||||
packages/web:
|
||||
dependencies:
|
||||
'@strudel.cycles/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
'@strudel.cycles/mini':
|
||||
specifier: workspace:*
|
||||
version: link:../mini
|
||||
'@strudel.cycles/soundfonts':
|
||||
specifier: workspace:*
|
||||
version: link:../soundfonts
|
||||
'@strudel.cycles/tonal':
|
||||
specifier: workspace:*
|
||||
version: link:../tonal
|
||||
'@strudel.cycles/transpiler':
|
||||
specifier: workspace:*
|
||||
version: link:../transpiler
|
||||
'@strudel.cycles/webaudio':
|
||||
specifier: workspace:*
|
||||
version: link:../webaudio
|
||||
devDependencies:
|
||||
vite:
|
||||
specifier: ^4.3.3
|
||||
version: 4.3.3(@types/node@18.16.3)
|
||||
|
||||
packages/web/examples/repl-example:
|
||||
dependencies:
|
||||
'@strudel/web':
|
||||
specifier: workspace:*
|
||||
version: link:../..
|
||||
devDependencies:
|
||||
vite:
|
||||
specifier: ^4.3.2
|
||||
version: 4.3.3(@types/node@18.16.3)
|
||||
|
||||
packages/webaudio:
|
||||
dependencies:
|
||||
'@strudel.cycles/core':
|
||||
|
||||
@ -5,3 +5,4 @@ packages:
|
||||
- "packages/core/examples/vite-vanilla-repl"
|
||||
- "packages/core/examples/vite-vanilla-repl-cm6"
|
||||
- "packages/react/examples/nano-repl"
|
||||
- "packages/web/examples/repl-example"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user