diff options
author | Joris | 2022-06-21 08:21:16 +0200 |
---|---|---|
committer | Joris | 2022-06-21 08:29:13 +0200 |
commit | 0f11fe9642ae14831c3e8f00a8b8d93ebd69b308 (patch) | |
tree | 2cf7dcbf2fe579f36cc4816901d14ddde3bb8810 /src | |
parent | 2453c7b83c1aeded3d55943c59011e14a3df6025 (diff) |
Start and stop sequencer with space
Diffstat (limited to 'src')
-rw-r--r-- | src/view/sequencer/play.ts | 57 |
1 files changed, 33 insertions, 24 deletions
diff --git a/src/view/sequencer/play.ts b/src/view/sequencer/play.ts index 57d8450..54f061d 100644 --- a/src/view/sequencer/play.ts +++ b/src/view/sequencer/play.ts @@ -15,34 +15,43 @@ export function view({ onNextStep, onStop }: Params) { let isPlaying = false let lastBeat: undefined | number = undefined - return h('div', {}, - h('button', - { className: 'g-PlayStop', - onclick: async (e: Event) => { - const target = e.target as HTMLButtonElement - isPlaying = !isPlaying - target.innerText = isPlaying ? '■' : '▶' - - let sounds = await soundsLib.load() - let step = (timestamp: number) => { - if (lastBeat === undefined || timestamp - lastBeat > 1000 * 60 / bpm) { - lastBeat = timestamp - onNextStep(sounds) - } + let button = h('button', + { className: 'g-PlayStop', + onclick: async (e: Event) => { + const target = e.target as HTMLButtonElement + isPlaying = !isPlaying + target.innerText = isPlaying ? '■' : '▶' - if (isPlaying) window.requestAnimationFrame(step) + let sounds = await soundsLib.load() + let step = (timestamp: number) => { + if (lastBeat === undefined || timestamp - lastBeat > 1000 * 60 / bpm) { + lastBeat = timestamp + onNextStep(sounds) } - if (isPlaying) { - window.requestAnimationFrame(step) - } else { - onStop() - } + if (isPlaying) window.requestAnimationFrame(step) } - }, - '▶' - ) - , h('label', + + if (isPlaying) { + window.requestAnimationFrame(step) + } else { + onStop() + } + } + }, + '▶' + ) as HTMLButtonElement + + document.addEventListener('keydown', event => { + if (event.key == " ") { + event.preventDefault() + button.click() + } + }) + + return h('div', {}, + button, + h('label', { className: 'g-Bpm' }, 'BPM', h('input', |