diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | src/view/sequencer/play.ts | 57 |
2 files changed, 33 insertions, 25 deletions
@@ -25,7 +25,6 @@ Then, open your browser at `http://localhost:8000`. # Todo -- Start and stop pressing space - Sub divide beats - Add / Remove beat integrated into sequencer - Augment the BPM by X after Y cycles 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', |