Hacker News new | past | comments | ask | show | jobs | submit login
Minimalistic Beat Maker (martinwecke.de)
237 points by ambigious7777 10 months ago | hide | past | favorite | 61 comments



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.


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.


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.


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.


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.


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.


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!


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


Mr. Worldwide.


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/


Reminds me of the the beat behind "One Dance" by Drake


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


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


i do agree, especially when adding several notes in quick succession the delay is rather bad.


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


you can click the share button bottom left, it generates a URL with the sequence encoded.


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



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.


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/


Their default beat in jam mode is sick af


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


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.


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


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


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



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.


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.



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.


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



> C V B N M

Dvorak user here -_-

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


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.


Isn't Dvorak an issue in a lot of places for this reason?


Just don't use Dvorak.


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


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


The <title> animation is wonderful.


Needs a way to pause or disable auto-play.


Press the space bar.


try pressing space


Its cool. thanks for sharing!

let me know how i can support


So much fun! I am so inspired to build!


that favicon is really cool too




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: