1import { StrudelMirror } from '@strudel/codemirror';
2import { funk42 } from './tunes';
3import { evalScope } from '@strudel/core';
4import { drawPianoroll } from '@strudel/draw';
5import './style.css';
6import { initAudioOnFirstClick } from '@strudel/webaudio';
7import { transpiler } from '@strudel/transpiler';
8import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel/webaudio';
9import { registerSoundfonts } from '@strudel/soundfonts';
10
11// init canvas
12const canvas = document.getElementById('roll');
13canvas.width = canvas.width * 2;
14canvas.height = canvas.height * 2;
15const drawContext = canvas.getContext('2d');
16const drawTime = [-2, 2]; // time window of drawn haps
17
18const editor = new StrudelMirror({
19  defaultOutput: webaudioOutput,
20  getTime: () => getAudioContext().currentTime,
21  transpiler,
22  root: document.getElementById('editor'),
23  initialCode: funk42,
24  drawTime,
25  onDraw: (haps, time) => drawPianoroll({ haps, time, ctx: drawContext, drawTime, fold: 0 }),
26  prebake: async () => {
27    initAudioOnFirstClick(); // needed to make the browser happy (don't await this here..)
28    const loadModules = evalScope(
29      import('@strudel/core'),
30      import('@strudel/draw'),
31      import('@strudel/mini'),
32      import('@strudel/edo'),
33      import('@strudel/tonal'),
34      import('@strudel/webaudio'),
35    );
36    await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
37  },
38});
39
40document.getElementById('play').addEventListener('click', () => editor.evaluate());
41document.getElementById('stop').addEventListener('click', () => editor.stop());