mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-12 22:28:36 +00:00
97 lines
2.9 KiB
HTML
97 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Buildless Vanilla Strudel REPL</title>
|
|
</head>
|
|
<body style="margin: 0; background: #222">
|
|
<div style="display: grid; height: 100vh">
|
|
<textarea
|
|
id="text"
|
|
style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
|
|
spellcheck="false"
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
id="start"
|
|
style="
|
|
position: absolute;
|
|
border-radius: 10px;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 20px;
|
|
border: 2px solid white;
|
|
background: transparent;
|
|
color: white;
|
|
cursor: pointer;
|
|
"
|
|
>
|
|
evaluate
|
|
</button>
|
|
<div id="output"></div>
|
|
<script type="module">
|
|
import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.3.2';
|
|
import { mini } from 'https://cdn.skypack.dev/@strudel.cycles/mini@0.3.2';
|
|
import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.3.2';
|
|
import { getAudioContext, webaudioOutput } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.3.3';
|
|
|
|
const ctx = getAudioContext();
|
|
const input = document.getElementById('text');
|
|
input.innerHTML = getTune();
|
|
|
|
evalScope(
|
|
controls,
|
|
import('https://cdn.skypack.dev/@strudel.cycles/core@0.3.2'),
|
|
import('https://cdn.skypack.dev/@strudel.cycles/mini@0.3.2'),
|
|
import('https://cdn.skypack.dev/@strudel.cycles/tonal@0.3.3'),
|
|
import('https://cdn.skypack.dev/@strudel.cycles/webaudio@0.3.3'),
|
|
);
|
|
|
|
const { evaluate } = repl({
|
|
defaultOutput: webaudioOutput,
|
|
getTime: () => ctx.currentTime,
|
|
transpiler,
|
|
});
|
|
document.getElementById('start').addEventListener('click', () => {
|
|
ctx.resume();
|
|
evaluate(input.value);
|
|
});
|
|
|
|
function getTune() {
|
|
return `await samples('github:tidalcycles/Dirt-Samples/master')
|
|
|
|
stack(
|
|
// amen
|
|
n("0 1 2 3 4 5 6 7")
|
|
.sometimes(x=>x.ply(2))
|
|
.rarely(x=>x.speed("2 | -2"))
|
|
.sometimesBy(.4, x=>x.delay(".5"))
|
|
.s("amencutup")
|
|
.slow(2)
|
|
.room(.5)
|
|
,
|
|
// bass
|
|
sine.add(saw.slow(4)).range(0,7).segment(8)
|
|
.superimpose(x=>x.add(.1))
|
|
.scale('G0 minor').note()
|
|
.s("sawtooth").decay(.1).sustain(0)
|
|
.gain(.4).cutoff(perlin.range(300,3000).slow(8)).resonance(10)
|
|
.degradeBy("0 0.1 .5 .1")
|
|
.rarely(add(note("12")))
|
|
,
|
|
// chord
|
|
note("Bb3,D4".superimpose(x=>x.add(.2)))
|
|
.s('sawtooth').cutoff(1000).struct("<~@3 [~ x]>")
|
|
.decay(.05).sustain(.0).delay(.8).delaytime(.125).room(.8)
|
|
,
|
|
// alien
|
|
s("breath").room(1).shape(.6).chop(16).rev().mask("<x ~@7>")
|
|
,
|
|
n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))
|
|
).reset("<x@7 x(5,8)>")`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|