mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 13:48:40 +00:00
84 lines
2.7 KiB
HTML
84 lines
2.7 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; grid-template-rows: 32px auto">
|
|
<button id="start" style="width: 100vw; height: 32px">evaluate</button>
|
|
<textarea
|
|
id="text"
|
|
style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
|
|
spellcheck="false"
|
|
></textarea>
|
|
</div>
|
|
<div id="output"></div>
|
|
<script type="module">
|
|
import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.6.8';
|
|
import { mini } from 'https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0';
|
|
import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.6.0';
|
|
import {
|
|
getAudioContext,
|
|
webaudioOutput,
|
|
initAudioOnFirstClick,
|
|
} from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0';
|
|
|
|
initAudioOnFirstClick();
|
|
const ctx = getAudioContext();
|
|
const input = document.getElementById('text');
|
|
input.innerHTML = getTune();
|
|
|
|
evalScope(
|
|
controls,
|
|
import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8'),
|
|
import('https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0'),
|
|
import('https://cdn.skypack.dev/@strudel.cycles/tonal@0.6.0'),
|
|
import('https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0'),
|
|
);
|
|
|
|
const { evaluate } = repl({
|
|
defaultOutput: webaudioOutput,
|
|
getTime: () => ctx.currentTime,
|
|
transpiler,
|
|
});
|
|
document.getElementById('start').addEventListener('click', () => 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>
|