aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md1
-rw-r--r--src/view/sequencer/play.ts57
2 files changed, 33 insertions, 25 deletions
diff --git a/README.md b/README.md
index da9fd01..16dfaca 100644
--- a/README.md
+++ b/README.md
@@ -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',