61 comments

[ 2.8 ms ] story [ 134 ms ] thread
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!
Its cool. thanks for sharing!

let me know how i can support

This is really cool! Having a lot of fun with it
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.
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

It needs to make the loop thing more obvious so when you press the button it’s obvious you’re adding to a sequence
I recommend slowing down time while a button is being held to preview where the insertion will happen upon button release.
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.

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.
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.

Yeah, that's my experience too. It's a fun diversion but given the output is ostensibly precisely quantised it's irritatingly glitchy
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.
>It only lets you define 16 evenly spaced notes.

Worth mentioning, since the post you replied to name-drops Dilla, that this renders it completely impossible to make a "Dilla"-style beat, let alone add any swing at all.

IMO it is just missing a way to turn off quantize and then turn it back on so you can both be on the grid and also swing or be ahead/behind the beat.

As typical though with anything related to web audio, it is neat one off parlor trick to show web programming skill but isn't worth the effort.

A circle is a compact way to make a useless quantized beat but if you want to take this further it will just end up reinventing the DAW wheel timeline. Otherwise, you have to have a sequencer for the circles, and then a timeline and then just get rid of the circles and have the timeline. In other words, a piano roll.

On another level, it is the coolness but uselessness of circular data visualization.

i do agree, especially when adding several notes in quick succession the delay is rather bad.
Timing on playback is very sloppy. Way more than "adding a human feel".
Feature request: encode sequences in the url so that they can be shared, saved, or even formed programmatically
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/fcbe8fd93847cd114424f...
you can click the share button bottom left, it generates a URL with the sequence encoded.
So much fun! I am so inspired to build!
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/

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

Later, in order to refine my idea, I used rust + wasm and made https://glicol.org/.

It basically solved the audio latency problem, and I also made js bindings: 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.

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.

Thanks for your suggestion, I will add it to the next version. I am currently rebuilding the homepage with solidjs.
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/63391...

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.
random note: on glicol.org you have "optinal semicolon" which I presume is "optional". Cool stuff anyway :)
Other small typos on the js page in case it helps: recommanded, reletively.
I'm getting buffer underrun city on glycol it sounds like crap.
Can you explain further or point to, how exactly wasm allows more precise timing? I also agree that the timing with JS and Webaudio is really poor, not as bad as MIDI with 24 PPQN, but I think a few years back from my experiments, the max I could get was a fluctuating 96PPQN.
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.

> C V B N M

Dvorak user here -_-

I'd strongly encourage using 1-9 instead of alphabets _-

Isn't Dvorak an issue in a lot of places for this reason?
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.

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 !

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.
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.
I don't hear any audio. (Chromium on Xubuntu.)
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.
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.
This is cool, but the latency makes it hard to make anything useful.