mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-12 14:18:36 +00:00
70 lines
2.3 KiB
HTML
70 lines
2.3 KiB
HTML
<div style="position: absolute; top: 0; right: 0; padding: 4px">
|
|
<button id="start" style="margin-bottom: 4px; font-size: 2em">start</button><br />
|
|
<button id="stop" style="margin-bottom: 4px; font-size: 2em">stop</button><br />
|
|
<button id="slower" style="font-size: 2em">-</button>
|
|
<button id="faster" style="font-size: 2em">+</button>
|
|
</div>
|
|
<textarea
|
|
style="font-size: 2em; background: #052b49; color: #fff; height: 100%; width: 100%; outline: none; border: 0"
|
|
id="text"
|
|
spellcheck="false"
|
|
>
|
|
Loading...</textarea
|
|
>
|
|
<script type="module">
|
|
document.body.style = 'margin: 0';
|
|
// import * as strudel from '@strudel.cycles/core';
|
|
import * as strudel from '../../core/index.mjs';
|
|
import * as util from '../../core/util.mjs';
|
|
import '../../core/euclid.mjs';
|
|
// import { Scheduler, getAudioContext } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.0.4';
|
|
import { Scheduler, getAudioContext } from '../index.mjs';
|
|
|
|
const { cat, State, TimeSpan } = strudel;
|
|
Object.assign(window, strudel); // add strudel to eval scope
|
|
|
|
const scheduler = new Scheduler({
|
|
audioContext: getAudioContext(),
|
|
interval: 0.1,
|
|
onEvent: (e) => {
|
|
e.context?.createAudioNode?.(e);
|
|
},
|
|
});
|
|
|
|
let initialCode = `sequence(1,2).mul(55/2) // frequencies
|
|
.mul(slowcat(1,2))
|
|
.mul(slowcat(1,3/2,4/3,5/3).slow(8))
|
|
.fast(3)
|
|
.freq()
|
|
.velocity(.5)
|
|
.s('sawtooth')
|
|
.cutoff(800)
|
|
.out()
|
|
`;
|
|
|
|
try {
|
|
const base64 = decodeURIComponent(window.location.href.split('#')[1]);
|
|
initialCode = atob(base64);
|
|
} catch (err) {
|
|
console.warn('failed to decode', err);
|
|
}
|
|
const input = document.getElementById('text');
|
|
input.value = initialCode;
|
|
const evaluate = () => {
|
|
try {
|
|
const pattern = eval(input.value);
|
|
scheduler.setPattern(pattern);
|
|
window.location.hash = '#' + encodeURIComponent(btoa(input.value)); // update url hash
|
|
} catch (err) {
|
|
console.warn(err);
|
|
}
|
|
};
|
|
evaluate();
|
|
input.addEventListener('input', () => evaluate());
|
|
|
|
document.getElementById('start').addEventListener('click', () => scheduler.start());
|
|
document.getElementById('stop').addEventListener('click', () => scheduler.stop());
|
|
document.getElementById('slower').addEventListener('click', () => scheduler.setCps(scheduler.cps - 0.1));
|
|
document.getElementById('faster').addEventListener('click', () => scheduler.setCps(scheduler.cps + 0.1));
|
|
</script>
|