6 ms·

Minimalistic Beat Maker

237 points by ambigious7777 2y ago

ecolonsmak 2y ago
This is fun! I'd like to be able to drag the notes around the circle to align the beat as needed, or a snap to grid with resolution options - but does the thing as described, very nice!
_f9cu 2y ago
Its cool. thanks for sharing! let me know how i can support
Edmond 2y ago
now combine it with this: https://string.spiel.com/ https://string.spiel.com/ :)
Lambdanaut 2y ago
This is really cool! Having a lot of fun with it
James_K 2y ago
It wasn't obvious to me that this only had 16 possible beats so I kept trying to input triplets and it didn't work. I was very confused and thought there was some awful latency or something else odd like that.
- dvncan 2y ago
  yea, had latency problems myself. not totally sure what the novel UX is here, felt pretty hard to get anything fun out of the tool
- dmix 2y ago
  It needs to make the loop thing more obvious so when you press the button it’s obvious you’re adding to a sequence
  - ukuina 2y ago
    I recommend slowing down time while a button is being held to preview where the insertion will happen upon button release.
davidthewatson 2y ago
Used sans metronome, I can see its appeal. That is, cool grooves in the studio may be related to low listener expectations. I mean, J Dylla grooves are cool precisely because they violate listener expectations. Funk is the art of surprise. However, with metronome, it is unusable on a Chromebook from USA. Getting my ictus to agree with the metronome was impossible, presumably because the latency from the key press to the recording of the event vs. the sounding of the metronome. I'm guessing the author knows this.
- James_K 2y ago
  I thought it had latency as well, but I think it might be deliberate. It only lets you define 16 evenly spaced notes. Logically it has to wait until the next beat to play the sound, meaning if you are a little late on one input, it will be pushed back to the next beat. Just a guess but I think it explains the issue.
  - b450 2y ago
    It's not just the input. The playback is pretty screwy. Try filling every slot with hi-hats. At least in my browser, the playback is quite stuttery and I can't really entrain to it. It sure is neat though! I love how the icons for each instrument can combine together, and the dynamic page title is fun.
    - tomgp 2y ago
      Yeah, that's my experience too. It's a fun diversion but given the output is ostensibly precisely quantised it's irritatingly glitchy
  - davidthewatson 2y ago
    I guess it makes sense that binary design underlies rhythmic fascism. I'd prefer minimalism that is not lossy. Either that or I don't want to work hard at triplets or be forced into faking them.
  - jjulius 2y ago
recursive 2y ago
Timing on playback is very sloppy. Way more than "adding a human feel".
typeofhuman 2y ago
Needs a way to pause or disable auto-play.
- ambigious7777 2y ago
  try pressing space
- latexr 2y ago
  Press the space bar.
nonethewiser 2y ago
Feature request: encode sequences in the url so that they can be shared, saved, or even formed programmatically
- ambigious7777 2y ago
  after taking a look at the src[0] it looks like you can share sequences by adding a hash. the format appears to be a letter A-Z to notate the position, followed by a sequence of numbers for the sounds. ex: https://martinwecke.de/108/#A1B2C3D4G123I4 gives [[1], [2], [3], [4], [], [], [1, 2, 3], [], [4]] where each array is a note and the subarray is the list of sounds played [0]: https://github.com/hatsumatsu/108/blob/fcbe8fd93847cd114424f42b4c2d61f1e8bc52e4/src/js/sequencer.js#L374 https://github.com/hatsumatsu/108/blob/fcbe8fd93847cd114424f...
- djhworld 2y ago
  you can click the share button bottom left, it generates a URL with the sequence encoded.
badrunaway 2y ago
So much fun! I am so inspired to build!
Funes- 2y ago
Alright, I think I'm ready to be part of the current music industry: https://martinwecke.de/108/#A02D14E02G14I02L14M02O14 https://martinwecke.de/108/#A02D14E02G14I02L14M02O14.
- millzlane 2y ago
  Mr. Worldwide.
- Ylpertnodi 2y ago
  Welcome - we need more in this massive pond. Though, I see you fat-fingered an 'F' instead of a 'T' in your username. /s/usernamechecksout Oops, I meant r/
- bigpapikite 2y ago
  Reminds me of the the beat behind "One Dance" by Drake
chaosprint 2y ago
Nice to see new art work in browsers! Some comments pointed out that there are latency issues, which are mainly caused by tonejs. I used tonejs a few years ago for my first live coding project: https://quaverseries.web.app/ https://quaverseries.web.app/ Interestingly, I also used the same interactive rhythm prompts as op in the page title, but the timing was not accurate at all. See this classic article: https://web.dev/articles/audio-scheduling https://web.dev/articles/audio-scheduling Later, in order to refine my idea, I used rust + wasm and made https://glicol.org/ https://glicol.org/. It basically solved the audio latency problem, and I also made js bindings: https://glicol.js.org/ https://glicol.js.org/ I'd love to get as much feedback as possible. I feel that this sequencer is particularly suitable for glicol's seq syntax.
- strickinato 2y ago
  Oooh!! I've played a bunch of glicol.org - but had no idea about the js bindings! Might I recommend you put a link to `glicol.js.org` from your main site. I might have given this a go instead of tone.js on a recent project.
  - chaosprint 2y ago
    Thanks for your suggestion, I will add it to the next version. I am currently rebuilding the homepage with solidjs.
- nox101 2y ago
  You don't need to use rust + wasm to "solve the latency problem" but it's cool that you solved it for yourself and made a cool library. https://musiclab.chromeexperiments.com/Song-Maker/song/6339181125697536 https://musiclab.chromeexperiments.com/Song-Maker/song/63391...
  - chaosprint 2y ago
    Partially agree. It's not necessarily Rust. But C/C++/Rust -> wasm -> AudioWorklet <- SAB -> Main Thread is basically the ceiling of web audio. Of course, there is still room for improvement in interaction. Your example is a project from 2018, also based on tonejs. The main problem is not latency, but the impact of GC and the main thread on the clock.
TZubiri 2y ago
Could you make a button similar to R (Record) but were you record sound through the mic and play it back? I guess due to the discrete nature of the tool, the sound must be cut to 16ths.
dheera 2y ago
> C V B N M Dvorak user here -_- I'd strongly encourage using 1-9 instead of alphabets _-
- hot_gril 2y ago
  Isn't Dvorak an issue in a lot of places for this reason?
- Ylpertnodi 2y ago
  Fired up my Digital Audio Workstation (DAW) - cubase 13) - and the on-screen keyboard is Q W E R T U I representing the white notes of the piano/ synth, and 2 3 5 6 7 representing the Black. I'm not sure if it is [has become] an industry standard within other DAW's, but ctrl+k has brought that up for me for oooooh, years. I use it when i get bored of regular synth-midi input and the occasional, inevitable 'mistake', often takes me in new directions. I might try a Dvorak kb...been feeling rather Schoenberg of late.
- cynicalsecurity 2y ago
  Just don't use Dvorak.
cpeterso 2y ago
Acid Defender is a fun web game based on a drum loop sequencer. Create your own acid house loops while avoiding the evil red dots! https://cappel-nord.de/webaudio/acid-defender/ https://cappel-nord.de/webaudio/acid-defender/
- tomcam 2y ago
  Their default beat in jam mode is sick af
wozniacki 2y ago
This is absolutely fabulous - the simplicity of it and the opportunity it gives to novices like me, who are too often nonplussed by the Abletons and the Novations. Great job resisting the urge to add bells and whistles !
joebergeron 2y ago
I actually really enjoyed the latency, unintentional or not. There are a million tools I can use to create a groove exactly as I intend. I enjoyed the aspect of surprise, of recording something and it not coming out exactly as intended, somewhat wonky and imperfect. The challenge and subsequent joy of trying to “feel” the resulting groove, one that you may not have ever come up with otherwise, is a delight.
- scrumper 2y ago
  Heh I came here to moan about the latency but I'll shut up :) I will say it did lead to unexpected results which I guess is a big part of the point.
hot_gril 2y ago
I like it. One thing, it'd be nice if it showed a cheat sheet of the keys. There are 9, and I keep forgetting what does what.
elihu 2y ago
I don't hear any audio. (Chromium on Xubuntu.)
lieblingautor 2y ago
Wow! I didn't expect the simple circular design, but it's so apt and clean. I just finished watching the Dieter Rams documentary, and this seems to follow his key principles well.
nchudleigh 2y ago
https://martinwecke.de/108/#A4B014C4D2F01H23J013L23N01O4P2 https://martinwecke.de/108/#A4B014C4D2F01H23J013L23N01O4P2 hell ya this is awesome.
simpleblend 2y ago
https://martinwecke.de/108/#A0E02G2I01O3P2 https://martinwecke.de/108/#A0E02G2I01O3P2
poopsmithe 2y ago
I love this! One thing I wish was there was the ability to click and drag a note I just put down. I want this because it's sometimes hard to get the note where I want it, and I want to reposition it. https://martinwecke.de/108/#A0C2D4E013G2I0K2L0M1N3O02 https://martinwecke.de/108/#A0C2D4E013G2I0K2L0M1N3O02
fuzztester 2y ago
https://martinwecke.de/108/#A3C34D14G023H1I4J2K03L2M12N4O1P0 https://martinwecke.de/108/#A3C34D14G023H1I4J2K03L2M12N4O1P0
memsom 2y ago
This is cool, but the latency makes it hard to make anything useful.
noiv 2y ago
The <title> animation is wonderful.
dudefeliciano 2y ago
that favicon is really cool too
4star3star 2y ago
Kinda hard to work it, but had some fun. https://martinwecke.de/108/#A0B02D2F12H2J2K0L2N12O4P2 https://martinwecke.de/108/#A0B02D2F12H2J2K0L2N12O4P2
pwenzel 2y ago
This is lovely and well implemented. I would take advantage of a metronome if provided one, but I at the same time I can appreciate happy timing accidents. Nice work.
amadeuspagel 2y ago
The abstract drum icons inspired me to add drums to a project of my own, slidesynth, a synthesizer for touchscreens: https://slidesynth.com/ https://slidesynth.com/
fuzztester 2y ago
>https://martinwecke.de/108/ https://martinwecke.de/108/ 108 I wonder ... https://en.m.wikipedia.org/wiki/108_(number) https://en.m.wikipedia.org/wiki/108_(number)

237 points by ambigious7777 2y ago

This is fun! I'd like to be able to drag the notes around the circle to align the beat as needed, or a snap to grid with resolution options - but does the thing as described, very nice!

_f9cu 2y ago

Its cool. thanks for sharing! let me know how i can support

Edmond 2y ago

now combine it with this: https://string.spiel.com/ https://string.spiel.com/ :)

Lambdanaut 2y ago

This is really cool! Having a lot of fun with it

James_K 2y ago

It wasn't obvious to me that this only had 16 possible beats so I kept trying to input triplets and it didn't work. I was very confused and thought there was some awful latency or something else odd like that.

dvncan 2y ago
yea, had latency problems myself. not totally sure what the novel UX is here, felt pretty hard to get anything fun out of the tool
dmix 2y ago
It needs to make the loop thing more obvious so when you press the button it’s obvious you’re adding to a sequence
- ukuina 2y ago
  I recommend slowing down time while a button is being held to preview where the insertion will happen upon button release.

davidthewatson 2y ago

Used sans metronome, I can see its appeal. That is, cool grooves in the studio may be related to low listener expectations. I mean, J Dylla grooves are cool precisely because they violate listener expectations. Funk is the art of surprise. However, with metronome, it is unusable on a Chromebook from USA. Getting my ictus to agree with the metronome was impossible, presumably because the latency from the key press to the recording of the event vs. the sounding of the metronome. I'm guessing the author knows this.

James_K 2y ago
I thought it had latency as well, but I think it might be deliberate. It only lets you define 16 evenly spaced notes. Logically it has to wait until the next beat to play the sound, meaning if you are a little late on one input, it will be pushed back to the next beat. Just a guess but I think it explains the issue.
- b450 2y ago
  It's not just the input. The playback is pretty screwy. Try filling every slot with hi-hats. At least in my browser, the playback is quite stuttery and I can't really entrain to it. It sure is neat though! I love how the icons for each instrument can combine together, and the dynamic page title is fun.
  - tomgp 2y ago
    Yeah, that's my experience too. It's a fun diversion but given the output is ostensibly precisely quantised it's irritatingly glitchy
- davidthewatson 2y ago
  I guess it makes sense that binary design underlies rhythmic fascism. I'd prefer minimalism that is not lossy. Either that or I don't want to work hard at triplets or be forced into faking them.
- jjulius 2y ago

recursive 2y ago

Timing on playback is very sloppy. Way more than "adding a human feel".

typeofhuman 2y ago

Needs a way to pause or disable auto-play.

ambigious7777 2y ago
try pressing space
latexr 2y ago
Press the space bar.

nonethewiser 2y ago

Feature request: encode sequences in the url so that they can be shared, saved, or even formed programmatically

ambigious7777 2y ago
after taking a look at the src[0] it looks like you can share sequences by adding a hash. the format appears to be a letter A-Z to notate the position, followed by a sequence of numbers for the sounds. ex: https://martinwecke.de/108/#A1B2C3D4G123I4 gives [[1], [2], [3], [4], [], [], [1, 2, 3], [], [4]] where each array is a note and the subarray is the list of sounds played [0]: https://github.com/hatsumatsu/108/blob/fcbe8fd93847cd114424f42b4c2d61f1e8bc52e4/src/js/sequencer.js#L374 https://github.com/hatsumatsu/108/blob/fcbe8fd93847cd114424f...
djhworld 2y ago
you can click the share button bottom left, it generates a URL with the sequence encoded.

badrunaway 2y ago

So much fun! I am so inspired to build!

Funes- 2y ago

Alright, I think I'm ready to be part of the current music industry: https://martinwecke.de/108/#A02D14E02G14I02L14M02O14 https://martinwecke.de/108/#A02D14E02G14I02L14M02O14.

millzlane 2y ago
Mr. Worldwide.
Ylpertnodi 2y ago
Welcome - we need more in this massive pond. Though, I see you fat-fingered an 'F' instead of a 'T' in your username. /s/usernamechecksout Oops, I meant r/
bigpapikite 2y ago
Reminds me of the the beat behind "One Dance" by Drake

chaosprint 2y ago

Nice to see new art work in browsers! Some comments pointed out that there are latency issues, which are mainly caused by tonejs. I used tonejs a few years ago for my first live coding project: https://quaverseries.web.app/ https://quaverseries.web.app/ Interestingly, I also used the same interactive rhythm prompts as op in the page title, but the timing was not accurate at all. See this classic article: https://web.dev/articles/audio-scheduling https://web.dev/articles/audio-scheduling Later, in order to refine my idea, I used rust + wasm and made https://glicol.org/ https://glicol.org/. It basically solved the audio latency problem, and I also made js bindings: https://glicol.js.org/ https://glicol.js.org/ I'd love to get as much feedback as possible. I feel that this sequencer is particularly suitable for glicol's seq syntax.

strickinato 2y ago
Oooh!! I've played a bunch of glicol.org - but had no idea about the js bindings! Might I recommend you put a link to `glicol.js.org` from your main site. I might have given this a go instead of tone.js on a recent project.
- chaosprint 2y ago
  Thanks for your suggestion, I will add it to the next version. I am currently rebuilding the homepage with solidjs.
nox101 2y ago
You don't need to use rust + wasm to "solve the latency problem" but it's cool that you solved it for yourself and made a cool library. https://musiclab.chromeexperiments.com/Song-Maker/song/6339181125697536 https://musiclab.chromeexperiments.com/Song-Maker/song/63391...
- chaosprint 2y ago
  Partially agree. It's not necessarily Rust. But C/C++/Rust -> wasm -> AudioWorklet <- SAB -> Main Thread is basically the ceiling of web audio. Of course, there is still room for improvement in interaction. Your example is a project from 2018, also based on tonejs. The main problem is not latency, but the impact of GC and the main thread on the clock.

TZubiri 2y ago

Could you make a button similar to R (Record) but were you record sound through the mic and play it back? I guess due to the discrete nature of the tool, the sound must be cut to 16ths.

dheera 2y ago

> C V B N M Dvorak user here -_- I'd strongly encourage using 1-9 instead of alphabets _-

hot_gril 2y ago
Isn't Dvorak an issue in a lot of places for this reason?
Ylpertnodi 2y ago
Fired up my Digital Audio Workstation (DAW) - cubase 13) - and the on-screen keyboard is Q W E R T U I representing the white notes of the piano/ synth, and 2 3 5 6 7 representing the Black. I'm not sure if it is [has become] an industry standard within other DAW's, but ctrl+k has brought that up for me for oooooh, years. I use it when i get bored of regular synth-midi input and the occasional, inevitable 'mistake', often takes me in new directions. I might try a Dvorak kb...been feeling rather Schoenberg of late.
cynicalsecurity 2y ago
Just don't use Dvorak.

cpeterso 2y ago

Acid Defender is a fun web game based on a drum loop sequencer. Create your own acid house loops while avoiding the evil red dots! https://cappel-nord.de/webaudio/acid-defender/ https://cappel-nord.de/webaudio/acid-defender/

tomcam 2y ago
Their default beat in jam mode is sick af

wozniacki 2y ago

This is absolutely fabulous - the simplicity of it and the opportunity it gives to novices like me, who are too often nonplussed by the Abletons and the Novations. Great job resisting the urge to add bells and whistles !

joebergeron 2y ago

I actually really enjoyed the latency, unintentional or not. There are a million tools I can use to create a groove exactly as I intend. I enjoyed the aspect of surprise, of recording something and it not coming out exactly as intended, somewhat wonky and imperfect. The challenge and subsequent joy of trying to “feel” the resulting groove, one that you may not have ever come up with otherwise, is a delight.

scrumper 2y ago
Heh I came here to moan about the latency but I'll shut up :) I will say it did lead to unexpected results which I guess is a big part of the point.

hot_gril 2y ago

I like it. One thing, it'd be nice if it showed a cheat sheet of the keys. There are 9, and I keep forgetting what does what.

elihu 2y ago

I don't hear any audio. (Chromium on Xubuntu.)

lieblingautor 2y ago

Wow! I didn't expect the simple circular design, but it's so apt and clean. I just finished watching the Dieter Rams documentary, and this seems to follow his key principles well.

nchudleigh 2y ago

https://martinwecke.de/108/#A4B014C4D2F01H23J013L23N01O4P2 https://martinwecke.de/108/#A4B014C4D2F01H23J013L23N01O4P2 hell ya this is awesome.

simpleblend 2y ago

https://martinwecke.de/108/#A0E02G2I01O3P2 https://martinwecke.de/108/#A0E02G2I01O3P2

poopsmithe 2y ago

I love this! One thing I wish was there was the ability to click and drag a note I just put down. I want this because it's sometimes hard to get the note where I want it, and I want to reposition it. https://martinwecke.de/108/#A0C2D4E013G2I0K2L0M1N3O02 https://martinwecke.de/108/#A0C2D4E013G2I0K2L0M1N3O02

fuzztester 2y ago

https://martinwecke.de/108/#A3C34D14G023H1I4J2K03L2M12N4O1P0 https://martinwecke.de/108/#A3C34D14G023H1I4J2K03L2M12N4O1P0

memsom 2y ago

This is cool, but the latency makes it hard to make anything useful.

noiv 2y ago

The <title> animation is wonderful.

dudefeliciano 2y ago

that favicon is really cool too

4star3star 2y ago

Kinda hard to work it, but had some fun. https://martinwecke.de/108/#A0B02D2F12H2J2K0L2N12O4P2 https://martinwecke.de/108/#A0B02D2F12H2J2K0L2N12O4P2

pwenzel 2y ago

This is lovely and well implemented. I would take advantage of a metronome if provided one, but I at the same time I can appreciate happy timing accidents. Nice work.

amadeuspagel 2y ago

The abstract drum icons inspired me to add drums to a project of my own, slidesynth, a synthesizer for touchscreens: https://slidesynth.com/ https://slidesynth.com/

fuzztester 2y ago

>https://martinwecke.de/108/ https://martinwecke.de/108/ 108 I wonder ... https://en.m.wikipedia.org/wiki/108_(number) https://en.m.wikipedia.org/wiki/108_(number)