mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-11 13:48: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
|
specifier: ^0.28.0
|
||||||
version: 0.28.0(@vitest/ui@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:
|
packages/webaudio:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@strudel.cycles/core':
|
'@strudel.cycles/core':
|
||||||
|
|||||||
@ -4,4 +4,5 @@ packages:
|
|||||||
- "website/"
|
- "website/"
|
||||||
- "packages/core/examples/vite-vanilla-repl"
|
- "packages/core/examples/vite-vanilla-repl"
|
||||||
- "packages/core/examples/vite-vanilla-repl-cm6"
|
- "packages/core/examples/vite-vanilla-repl-cm6"
|
||||||
- "packages/react/examples/nano-repl"
|
- "packages/react/examples/nano-repl"
|
||||||
|
- "packages/web/examples/repl-example"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user