Would be nice if it did `history.replace` instead of push, it currently nukes your back button. There is also something off, maybe a 4-note limit per row? I couldn't quite put my finger on it but some high notes seem to not come out.

Hey, Author here. Thanks!

> Would be nice if it did `history.replace` instead of push, it currently nukes your back button.

This is fixed now. Can you check now?

> There is also something off, maybe a 4-note limit per row?

Yeah, I felt this too. Something is off when most of the notes in a row are selected. I will figure this out.

That was enjoyable to play with! Thanks for sharing. I think it would be nicer if it didn't use the anchor tag for storing data which messes up history, especially since it has a built-in share that generates a URL that can recreate the song. It would be cool if it just read the URL in once on load and didn't update it unless share was clicked.

To me the mistake is not having the back/forward buttons honor the different states. It would be a nice built-in undo/redo.

Hey. Author here.

The history issue is fixed now :). I ended up using replaceState instead of pushState

I like the beautiful design finish of Tones.fm https://www.tones.fm/

Tones.fm is incredibly well done. However I suspect that, compared to this, the additional complexity creates a bit more hesitation for visitors to actually start playing with it. And the demos, while great, also paradoxically reduce the likelihood that the average visitor will actually play with it (it's more tempting to just listen to the demos and call it a day). Maybe the ideal compromise would start off like Music Grid here, but also have additional features subtly hidden but easily accessible.

Discussed at the time: https://news.ycombinator.com/item?id=16552777

I get a lot of crackling on my Pixel 2 with this.

Same for me on chrome/win10

Slightly OT.

It seems like there is an uptick in music production-related posts on HN lately. Which is awesome.

Has it always been like this and I'm just now noticing? Or, if it is a recent phenomenon, do we think it's because folks are trying to connect more with arts, in light of everything going on?

Anyway, this is very cool and I'm happy to see it!

The plural of anecdote is not data and all that but COVID resulted in me buying a midi keyboard and I’ve been learning Ableton live.

(And messing about with the idea of using a midi input device to control batch jobs)

The plural of anecdote is data. You just need to know that your anecdotes are reasonably trustworthy.

Useful Ableton thing: you can paint out a scale in notes, move those notes to -1 (left arrow key), then fold the scale on them. I like to lower the velocity on the top and bottom of each octave so I always know where they start and stop.

It seems as though quarantine/lockdown has been seized as a good opportunity to finally tackle a project or two.

I know three people who are working on something music-related off the top of my head, and and countless more working on something a little more lively than an every day weekend project.

It doesn’t have to be music of course, but I think there is a lot of overlap in the hacker<—>musician Venn diagram, as alluded to above.

It might come and go, but I find it to be pretty consistent. There is, in my experience, a strong overlap between hackers/computer scientists and musicians; for one anecdotal example, Donald Knuth is an accomplished organ player.

https://www-cs-faculty.stanford.edu/~knuth/organ.html

I hope Dr. Knuth is a registered organ donor.

Every time I hit an app like this I get sucked in, and start imaging myself as the next master of chiptunes. And then I want to make a game to use the music. And then the baby starts crying and I remember why my side projects falter before they start.

https://music-grid.surge.sh/#1285-2-2570-68-528-16-2592-64-5...

Thank you to the creator of this! I am actually working on a hardware version of a sound grid similar to this! I was inspired by a much older version of this which was written in Flash and doesn't work too well (there is also a 5 year old Android app [1]). It's awesome to have something which actually works on a modern phone.

My idea for a sound block toy is similar but instead of having a grid it's a line of blocks which light up and play a tone. The tone will be adjustable with buttons or gestures and can be rearranged.

I also need planned out a life size grid which people collaborate and step on to light up the notes. Obviously this concept is very interesting to me!!

https://play.google.com/store/apps/details?id=com.njnelson.t...

> I was inspired by a much older version of this which was written in Flash and doesn't work too well

If you're talking about Tone Matrix, I ported it to JavaScript to work on modern browsers and phones.

Check it out if you're so inclined:

https://www.maxlaumeister.com/tonematrix/

Wonderful thank you! I have had a hard time finding a replacement and "time grid" wasn't a good search term!

Something like the Polyend Seq sequencer or (if you want to include sound) the Synthstrom Audible Deluge?

No not quite like the polyend seq, each block is a note and is moveable so you can arrange them together in whatever sequence you want that way. The blocks communicate with infrared so they know what order they're in

This design exists in the form of the more complex Yamaha Tenori-on, which was featured by Four Tet in There Is Love In You - https://www.youtube.com/watch?v=M20ukzn_rsw

It's also expensive, now 500 USD on eBay - so it's nice to see a version of the product getting put together on the web :)

I'm sure you and the creator know of this already, but the guy who designed the Tenori-on also made the Nintendo DS game Elektroplankton. It presents such wonderful ideas for messing about with music that I'm stunned there isn't a huge scene of people things like it online these days.

> Tenori-on

There is also a very lovely spiritual successor for VR called Soundstage VR: https://github.com/googlearchive/soundstagevr

Which is where the design comes from.

There are a bunch of software implementations, by the way. Sometimes they refer to the concept by ‘Tone Matrix’ instead.

P.S. (not really related): also til Tenori-On was originally promoted by Atom Heart aka Uwe Schmidt, a man of a hundred aliases and endeavors, with a particularly fun project Señor Coconut:

https://youtube.com/watch?v=X-ygv1CKzAk

https://youtube.com/watch?v=tzoMNOids7k

Neat. It would be nice if the grid didn’t clear when increasing the row count.

I like the share feature! https://music-grid.surge.sh/#64-2691-64-2694-32-2380-32-2368...

I made a program to randomly generate a URL for this that will make "music":

https://gist.github.com/jedberg/37e9680806bc517925daeaae4798...

Can someone with knowledge of music theory explain how it works?

Meaning, how come if I close my eyes and place some random tiles, it still come out sounding OK. But not so if I bang random keys on a piano.

The notes that this app is playing, from lowest to highest, are:

B3 C#4 F#4 G#4 C#5 D#5 E5 G#6 B6 C#7 F#8 G#8

These notes are all diatonic, e.g. from the same key (unlike all the keys on a piano). That key is C# relative minor (or E major). In modal language, this is the C# Aeolian (or, when played from E to E, Ionian mode):

C# D# E F# G# A B C#

If you play notes restricted to a single key, it will come out sounding OK.

Same as playing only the white keys right? (C major/ A minor)

Yeah, except with no F.

> this is the C# Aeolian

Or it could equally well be

G# A# B C# D# E F# G#

(I hear it much more like that too.)

Sure... it could be that mode (Phrygian, or the mode starting on the 3rd degree of the major scale).

The tonal center we'll hear using this specific collection of notes, whether it be G#, C#, E (or any other note from this key), all depends on the sequence you enter. Rhythmic variation would also support this but this app does not have that option.

Here's one with a tonal center of C#: https://music-grid.surge.sh/#1152-2112-1040-2212-1088-1320-1...

And with G#: https://music-grid.surge.sh/#260-272-528-256-160-288-512-108...

My point was merely that the statement "In modal language, this is the C# Aeolian" is not correct. (source: am a jazz musician)

It's unclear to me from your comment whether you realize that.

I am also a jazz musician.

this scale:

C# D# E F# G# A B C#

is C# Aeolian.

Minus the A natural, that is one collection of notes that is being strongly suggested by this app. Yes, an A# would would change the tonality, and the key.

To me, I hear the 9th scale degree relative to the tonic much more than the 6th (i.e. 13th). That's in general, and it's based on my own predilections and harmonic training. This scale includes a D#, as well as the 4th and 5th. I "hear" this as relative to C#, not G#. Totally welcome, of course, that you hear this as relative to G#; the E natural then functions as the minor 6th. To me, that's a much weaker harmonic suggestion than the E natural functioning as the minor third. It's totally OK with me that we hear this differently. Is it OK with you?

Also, why does it matter to you what I (some random person online) realizes (or not)?

If you play any notes within a scale they are guaranteed to sound good together. Note: I'm not an expert, correct me if I'm wrong.

If you bang only the white keys of a piano, with a good rythm (ie on the tick of a metronome), you'll get the same effect

I like the simplicity and note sounds, very cool!

Check out my happy song: https://music-grid.surge.sh/#521-80-0-2121-512-552-0-2114-0-...

This is pretty cool! but hitting "back" after adding multiple notes did not work (it got stuck). Could you use query params instead of hash?

I a different comment they requested exactly this behavior not to push too much stuff on the browsing history. It should be about the way the url is updated rather than fragment vs parameters

RE: audio on iOS

Just a heads up as I've had the same issue with a (way more confusing and less fun) thing I done, you need to turn off the silent switch on iPhones to hear the audio. Maybe detect the device and include a prompt?

Ahh, thank you so much. I was about to report it as a bug! Now time to play!

That was fun! Somehow I feel like I came up with a tune that already exists - https://music-grid.surge.sh/#256-80-256-40-256-32-256-288-12...

I added to yours! Fun! https://music-grid.surge.sh/#272-80-256-40-256-32-256-288-13...

And I have added to the both of yours! It needed some B A S S.

https://music-grid.surge.sh/#2320-2128-2304-2088-1280-1056-1...

Is this what collaborative open source music creation looks like?

Getting some fantasy worldmap vibes

What scale is this? It’s major, but no seventh tone...?

B C# F# G# C# D# E G# B C# F# G#

Based off what I hear here:

https://music-grid.surge.sh/#0-0-0-1025-1-2-4-8-16-32-64-128...

One might assume it's B Major with no 7th, but I think it sounds more like C# Minor/Dorian with no 6th.

Would be awesome if it had a selector to change the mode while keeping the same grid selections.

That sounds like a good idea.

https://github.com/irshadshalu/music-grid/issues/12

Commenting for posterity:

https://music-grid.surge.sh/#128-16-0-16-128-16-0-528-0-16-0...

I really like it. https://music-grid.surge.sh/#192-16-1024-1024-1-160-192-128-...

Now I need to find a way to export the sound and use it as my ring tone

edit: found how to do it via audacity https://askubuntu.com/questions/229352/how-to-record-output-...

I'm not trying to be cynical but what is special about this verses that 1000s of similar sites that came before?

Here's one of google's

https://www.google.com/logos/2017/fischinger/fischinger17.ht...

Here's Ableton's

https://learningmusic.ableton.com/

Is there something special about this one?

Why the Rifleman's Creed, of course: "There are many like it, but this one is mine."

(To be clear, I am not the creator here.)

There are many things like this, but for what it is worth, this is a pretty well executed one: simple to use, elegant UX, produces pleasing tones even when used inexpertly.

Also the fact that this one expands to a large number of steps is somewhat unique I think. (BTW it seems odd to me that the lower bound on the number of steps is 10 rather than the conventional 8.)

I too have seen (and played with) a large number of step-sequencer things and literally have three of them sitting next to me on my desk while I type this.

But I still enjoyed playing with this one for a little while.

I'm sure the OP learned something from this exercise, and there could be people for whom this is their first/best experience with a simple step sequencer, so it may "unlock" something for someone. But I think that's unnecessary "gravy" in this case. Sometimes the "joy" of creating is reason enough to do it. I may never visit Music Grid again but I'm glad OP shared it.

Hey, I'm the author and your comment did put a smile on my face. thanks for that :)

> steps is 10 rather than the conventional 8

oops, sorry on that one as I have no idea about music theory and stuff. I just learned a lot by building it and now going through this thread learning more.

The 8-not-10 isn't a problem at all, just a little surprising and maybe a hint that the creator wasn't deeply experienced with sequencers.

To be honest that's fine. I sincerely think this is a pretty elegant implementation, maybe because you're looking at it with fresh eyes.

Traditionally the hardware versions of these things have a pretty clunky and awkward interface that seems designed to minimize the number of switches and dials rather than to be readily understandable. A lot of the "toy" software sequencers you'll find online are clearly modeled on the hardware sequencers - sometimes specific ones - and copy that clunky interface. The "here's a grid, toggle a button to play a sound on that beat" interface is much more intuitive and fun to play with.

I think this is really well done. The only idea for improvement that jumps out at to me would be the ability to drag the cursor with the mouse down to toggle multiple buttons at once rather than independently clicking on each one.

If you want to learn more about Music Theory, I highly recommend Adam Nealy's videos on YouTube. He takes a refreshingly relaxed, entertaining, and overall very enjoyable approach to music theory, in stark comparison to a lot of the extant music theory material available. Which is kind of ironic since one of the reasons people play music is to relax, entertain, and enjoy themselves: https://www.youtube.com/user/havic5

I also like Rick Beato, as he tends to do more song deconstruction, though sometimes he can come off as a bitter, old man (though most of the time it's endearing): https://www.youtube.com/user/pegzch

Finally, I also like Signals Music Studio. He takes a little more of a traditional approach, but still in the camp of positivity rather than criticism of "crappy modern music": https://www.youtube.com/channel/UCRDDHLvQb8HjE2r7_ZuNtWA

I love WebAudio stuff. It's so much fun to bang out a jam with some code. I could never get the gumption to get SuperCollider or any of the other systems working, because I was much more interested in the interactivity and sharing that are fundamental to the web.

Here's a multi-touch capable keyboard: https://codepen.io/SeanMcBeth/pen/meaQvj

Here's a game I made (about the consequences of following orders) that used nothing but WebAudio synthesis for the sound: https://www.seanmcbeth.com/yabs.html

Actually, I've been hacking on audio stuff in the browser before there was even a WebAudio API. Here's a synth I made that generated raw WAV files on the fly and played them in a standard <audio> tag (note: it pretty much only works correctly in Chrome): https://www.seanmcbeth.com/html5/synth/

Always keep playing.

Nothing special. But I'm sure it was fun building it!

I've seen the others too, but I found this to be less busy and more fun!

I too feel a little cynical, because I built basically exactly this back in 2012. Before Google, and before Ableton. AFAIK, it was the first grid sequencer online. The first version used the Mozilla audio API, before Web Audio was even a thing. I wish I was credited for the inspiration somewhere, but I guess it's very possible that this is an independent reinvention.

I called it MusicToy: http://maximecb.github.io/MusicToy/#aaaaaaaaaaaaaaaaaaaaaaaa...

It's almost exactly the same, with the pattern encoded in the URL, but it also has drum samples, and it has very few dependencies (no need for node or any web frameworks). I personally prefer having time go from left to right because that's how most sequencers work, and our monitors tend to be wider than they are tall.

I also made an updated, more advanced version (MusicToy 2) in 2019: https://mt2.musictools.live/

Coldcut, a Brit electronic music duo who also dabbled in audio/video mix software, made a simple online music tool for Absolut Vodka in 1998. (Absolut was targeting the youth market and set up a site called Absolut DJ.) Coldcut's thing was a simple grid on which you placed sound effects/samples sprites. A dot moving through the grid would play each in turn as it hit them. It was really good fun, but I can't find it now. Might have been made in Flash - or perhaps it was still known as Shockwave Flash back then.

Here's an archive article about Absolut's campaign:

https://www.campaignlive.co.uk/article/absolut-vodka-launche...

Coldcut's Wikipedia entry:

https://en.wikipedia.org/wiki/Coldcut

Tone Matrix predates yours by many years and was popular at the time. If you weren't aware of it, you should charitably assume OP independently built this too.

Yes, was going to say the same thing. I was playing with Tone Matrix way back in 2006 I think. It was built with Flash, and died with the rest of the flash web.

Edit: original link to tone matrix: http://lab.andre-michelle.com/ToneMatrix

I ported Tone Matrix to JavaScript to help keep it from dying:

https://www.maxlaumeister.com/tonematrix/

Tone Matrix isn't a grid sequencer though, but fair enough, I should have said the first JS-based grid sequencer, not the first grid sequencer online.

'first JS-based grid sequencer'

We're all inspired by other things, and being first doesn't really count for much if you don't promote yourself. Even then, it's a roll of the dice as to if you stand out in the crowd.

If you're just going by "JS-based grid sequencer' I created one in February 2011 as part of an HTML-based emulation of a Boss DR-110 drum machine (Which I later updated to use the Web Audio API to synthesize the drum voices)

https://github.com/leviathant/BossDR110

It's skeumorphic (I was challenging the popular notion "You can do everything in HTML that you can do in Flash" at the time - it wasn't true then, but we're much closer now), I never finished out 'song mode', but it is a JS-based grid sequencer that predates your timeline. As best as I can tell, it was the first click-and-drag Javascript knob done Rebirth/Reason style - it was a little clunky, but I sure as hell couldn't find any remotely similar code to base it off of - but I don't get bent out of shape whenever I see other people making Javascript knobs.

Yes, we're all inspired by other things. Neither of us invented grid sequencers, or music theory.

I know there was no hostile intent, and I'm glad that OP is having fun, but hopefully you understand why I feel a slight pinch when I see something that is so close to what I've built making the rounds on HN with zero acknowledgement from OP.

If we just go by a description of features, we've both built a grid sequencer in JS, with a built in synth that is designed to play on a scale so that everything comes out "sounding good"... With a serverless architecture so that you can share the tunes with anchor tags. It's precisely the same idea. How would you feel? Would you be able to be completely detached?

I did promote MusicToy a bit. The original MusicToy made the rounds on reddit 8 years ago. MusicToy2 has had the same (small) base of active users for about 1.5 year now: https://mt2.musictools.live/

Either way, I should probably look at this as a learning experience. It shows that I didn't promote my project as well as I could have. My project could also use better mobile support in terms of auto-scaling the page for mobile displays.

There's so much messaging around "if you build it, they will come" and "my work should speak for itself" that it's easy to feel defeated when someone does the same thing - often, a variation you'll even find to be inferior - but gets more recognition for it because that person was better at promoting.

Speaking for myself, I'm not great at self-promotion. It feels gross. Marketing feels gross - and, if I'm being real, it often is gross. But that's how you get recognition. Spending time to talk about yourself and your work helps to position you for that time that luck just seemed to fall in your lap.

As I was building out that JS Boss DR-110, I rounded a corner where I felt like if I really dedicated myself to putting the polish on - finishing up song mode, scrapping and rewriting the frontend styling, a live demo page with a listing of actual DR-110s for sale driven by the eBay API - I could have made a sizeable splash in whatever that niche world was. Of course, in early 2011 getting consistent timing out of Javascript doing audio playback wasn't possible - that was a considerable hindrance. But it would still be a solid groundwork for someone else's future project. I could have done a few low-key unpaid speaking engagements about it, for sure.

Then what?

Every now and then, I think about going back and rewriting the sequencer, or building an import/export routine, or implementing MIDI I/O, but I have no real desire to get into the world of creating softsynth drum machines & sequencers. It's a fun footnote, it was a good way to kick off some rust - I hadn't been doing front end code for several years by that point.

Nice job on Musictoy, and that's great that you've got a persistent userbase, no matter what the size is!

Thanks for the honest comment. I think you're quite right about the "if you build it, they will come" messaging, and the importance of self-promotion.

It's also OK to build projects that don't necessarily go anywhere. I recently had a music app I was developing and I had hopes for turning that into a business, but I quickly realized that in order to make the app really competitive, to have enough value that people would pay for it, it would become a job on top of my job, and that would really kill the fun. At the end of the day, side-projects like this are mostly about having fun and learning a few things.

I am happy with my small userbase. The fact that a few people keep coming back, and the app lives on its own, without me promoting it, means that some people find genuine value/enjoyment out of it. I intend to keep the app running and free for as long as it doesn't become a maintenance burden.

> 0 acknowledgement from OP.

if it makes you feel any better, I am the author of the website and I posted the same exact link 9 hours before OP and it got 3 upvotes [0] .

then I woke up to a lot of GitHub stars on the repository and turns out this blew up.

HN works in mysterious ways.

> 0 acknowledgement from OP

I have no idea, that seems like a newly created account to me. if you have any queries or issues/feedback, you can always raise it on git or contact me.

I took this only as a learning experience and in no way to promote or market something :)

[0]: https://news.ycombinator.com/item?id=23508667

Thank you for responding irshadshalu, I sincerely appreciate you taking the time. I agree that HN works in unpredictable ways. I don't know if you were just more lucky than I was, or if people like your app better because the UI looks better. If that's the case, it's interesting to know.

This HN account is new-ish, but the original MusicToy blog post from 2012 is still around [1].

As far as Git goes, I would appreciate it if you had an acknowledgement somewhere that linked to the MusicToy repo[2], or just mentioned in passing in terms of inspirations/predecessors. You obviously have no obligation to do this, but it won't take away from the success of your app if you choose to do so.

I wish you the best of luck in your future endeavors, and may your success encourage you to build more great projects.

[1] https://pointersgonewild.com/2012/04/23/musictoy-music-made-...

[2] https://github.com/maximecb/MusicToy

But parent hasn't acknowledged that you were an inspiration. I find this insistence quite rude. Especially when it's taking well trodden ground in desktop software and putting it on the web.

Well trodden ground? Except there wasn't desktop software that could do this beforehand.

If you can't see the innovation, let me spell it out for you in very few words: the software has an intuitive-enough UI that you need no prior knowledge of the program to use it, and you can share musical ideas in one or two clicks. Please tell us exactly which desktop program allowed you to do this, as easily, pre-2012? Yes, this is novel, since it enables something that wasn't possible before.

This kind of simple edit and share songs definitely existed, e.g. Otomata. So you combined Otomata and Tone Matrix? Cool, I guess, but the ingredients were right there for any number of people to do the same thing independently.

Trying to claim your place as the trunk of the tree that any tool that looks like this branches out of is not reflective of reality and pure hubris.

Also I'd appreciate it if you added a link on Music Toy for both of these apps which clearly gave you inspiration.

Why in the world would the author lie to market for you when you weren’t an inspiration?

I think it's very likely that he has seen one of the multiple music apps I've put out over the years and has actually taken inspiration from it. Either way, it's not required, but considerate to acknowledge your predecessors. Particularly given that the concept is pretty much exactly the same.

I was not aware of any of the music apps you made and came to know about MusicToy first time from this thread (oh and it's great btw, I played around with it a bit)

and my inspiration, as I stated earlier was from a stress-reliver app in play store which I have given credits in the first paragraph of README.

Invention is a myth

Very enjoyable, thanks:

http://maximecb.github.io/MusicToy/#babababaaaaaaaaababababa...

https://mt2.musictools.live/#1259

These are great too. Thanks for sharing!

Ironically that google link seems to be broken in Chrome, because it predates the time in 2018 when chrome intentionally broke most/all existing webaudio content.

(Ostensibly the change was meant to prevent pages from auto-playing sounds without user input, but in practice it broke pages regardless of whether they did so.)

Details: https://developers.google.com/web/updates/2018/11/web-audio-...

Strange, that google one works for me in Chrome and it was made after the restrictions

The more embarrassing one for Google is this entire site

https://www.google.com/search?q=link%3Ahttps%3A%2F%2Fmusicla...

It's unpredictable; the chrome policy that breaks webaudio is partly based on your browsing behavior.

When they first applied the policy (mid 2018), it broke pretty much all webaudio and they un-applied it a few days later. When they later reapplied it (late 2018) they didn't change the policy itself, but apparently added a thing where chrome ignores the policy if it remembers you having allowed audio to play at that site before.

Anyhoo it looks like I was in an incognito tab when I tried it before and the audiocontext was silenced. In a regular tab it plays normally (for me, anyway).

What's really weird is that sometimes the audio works of you navigated to the page, but if you refresh the page it breaks.

For as much as Google engineers talk about "don't break the Web", they break the fucking web all the time.

It uses Google Analytics.

>I'm not trying to be cynical

Welp, you failed spectacularly at that. You came off like a bitter, cynical asshole who's mad that someone made something.

>Is there something special about this one?

Yeah, someone had the inspiration to make something and they did it. That's pretty fucking special.

"The credit belongs to the man who is actually in the arena... who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds... who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."

Oof, please don't do this. I appreciate you standing up for the OP, and of course the shallow-dismissal aspect of internet comments is a big problem, big enough that the site guidelines ask people not to do it: https://news.ycombinator.com/newsguidelines.html. But they also ask you to "Be kind", plus this:

"Please respond to the strongest plausible interpretation of what someone says, not a weaker one that's easier to criticize. Assume good faith."

The best way to respond to a comment like that isn't to do to Monty Python fish slap but rather to include and expand (I almost want to say 'embrace and extend') - rodw shows how it's done: https://news.ycombinator.com/item?id=23517644

https://music-grid.surge.sh/#1024-2049-2624-0-512-3330-2112-...

https://music-grid.surge.sh/#584-584-288-144-72-544-32-544-2...

For those for whom Baby Shark is just too listenable

Edit: someone suggested the Google version. Just to ruin your day twice...

https://g.co/doodle/2c2ydxw

Why must you bring this evil into our midst!

This is just one of my favourite things I’ve played with in ages. Thanks for making it!

Here’s one of my many attempts at tunefulness https://music-grid.surge.sh/#162-2628-33-16-130-593-2048-388...

Can someone explain how it works musically? Why does (almost) anything you make sound good?

You know how a piano keyboard has white and black keys? This toy shows you the white keys only. And it works well, kudos to the author!

Is it really that simple?

When somebody ask me how to pronounce my username: https://music-grid.surge.sh/#384-320-128-0-384-64-384-64-384...

EDIT: I don't know anything about music but... wouldn't it make sense to run left-to-right instead of top-to-down?

My guess is that it makes more sense on a smartphone to continue down than right ?

I made a little RPG-y tune.

https://music-grid.surge.sh/#8-130-0-516-256-136-64-32-16-8-...

The use of binary in the URL is very clever. Great way to make it shareable with a reasonable length url.

Also, if you really wanted to, you can write a program to construct these URLs.

Edit: I wrote the program: https://gist.github.com/jedberg/37e9680806bc517925daeaae4798...

Super cute!

I assume it's using the pentatonic scale or other music theory trickery to make "anything" sound good? :)

First try, came up with https://music-grid.surge.sh/#4-2048-8-2114-2-2370-2-2112-321..., am happy

This actually sounds great. Loved it.

> I assume it's using the pentatonic scale or other music theory trickery to make "anything" sound good? :)

I have no idea. But it works :D

Someone get me Deadmau5's number! https://music-grid.surge.sh/?fbclid=IwAR3Xc0-eQGjjQxebL2UJW4...

This is neat :) I hope my 32 row composition sparks joy in some https://music-grid.surge.sh/#512-1024-0-2376-132-16-8-1188-6...

Love it! I feel like I made a different "zone" in this world: https://music-grid.surge.sh/#0-1056-2048-32-64-64-1024-2176-...

This is great!

Had a lot of fun playing this. Here's my contribution to this thread, inspired in some old games:

https://music-grid.surge.sh/#768-3092-768-3840-320-3092-320-...

This is so much fun. It would be great to have an export function that throws out an mp3 or aac file to share the music with others directly or use it (embedded) somewhere.

I tried several patterns myself and also tried the links others shared here. But now I’m left with the feeling that they all sound very similar. :(

It's just one fixed scale so everything will automatically sound very similar. Also the reason why nothing sounds bad. It's "cheating" in that way compared to a piano.

What makes all pieces sound so similar isn't the fixed scale, it's that it's always the same "instrument" and always made of quarter notes.

There's thousands upon thousands of songs for any scale after all

That too but mostly the scale.

Amazing tool. So satisfying to make something https://music-grid.surge.sh/#2080-64-1280-2064-512-0-2080-0-...

Funny ! I just put something that was visually appealing and it worked

https://music-grid.surge.sh/#1040-2080-1088-32-16-136-64-32-...

Nice! Had fun playing with this. Gave me a retro vibe :-)

https://music-grid.surge.sh/#392-0-392-1024-1-64-1056-1-64-1...

Fun! Went with a bluesy 3 beats, 5 bars total.

https://music-grid.surge.sh/#644-8-2304-660-0-2372-672-14-12...

Great fun. Love the shareable URLs.

https://music-grid.surge.sh/#1-1282-1-1280-2056-1044-2056-10...

This is very similar to my own open-source project ToneMatrix Redux!

https://www.maxlaumeister.com/tonematrix/

I love what you did with the adjustable column length.

Yours looks more refined I'd say.

My masterpiece... I shall call it ... "Ode to ice cream and pizza"

https://music-grid.surge.sh/#360-336-168-336-4095-8-330-8-35...

My masterpiece https://music-grid.surge.sh/#2569-20-130-0-40-64-544-21-72-1...

I'm finding an interesting effect: when I'm making my own loop I'm finding the music pretty cool and enjoyable and I can definitely imagine turning it into an actual song. When I listen to the compositions posted here, I'm thinking "this is isn't interesting to hear whatsoever".

I'm not sure what's my point (definitely not that I'm doing better, what I composed objectively suck), maybe that composing your own stuff gives it a different dimension? Or maybe just the fact that you're building it bit by bit makes it more interesting because there's a sense of progression

I think at least in my case, that sense of progression is definitely a big reason why my own "compositions" sound pretty good.

This is my crowning achievement: https://music-grid.surge.sh/#2050-8-256-128-2112-32-72-36-20...

https://music-grid.surge.sh/#1152-128-1152-128-1280-648-320-...

https://music-grid.surge.sh/#17-2114-4-2208-20-2048-20-2112-...

https://music-grid.surge.sh/#26-2561-71-711-26-2592-23-663-4...

Small bug? I added a 16th row, and when you follow my link it shows all 16, but the “Rows:” in the header says 15.

https://music-grid.surge.sh/#64-544-264-16-1152-4-64-528-66-...

https://music-grid.surge.sh/#36-64-18-64-260-64-1040-260-0-3...

This is neat! Cool to encode the state in the URL, but it’s better to use replaceState rather than pushState for this. I don’t typically want every single change I make to add an entry to my browser history.

Made this change. Thank you!

If you liked this check out my friends project in a similar vein: https://geneticbeats.com/

https://music-grid.surge.sh/#128-32-64-32-8-32-0-32-0-0-0-12... https://music-grid.surge.sh/#320-0-320-1024-128-0-160-0-16-1...

https://music-grid.surge.sh/#1184-1104-1280-2048-1344-512-51...

Train an AI and then you have SRaaS (Steve Reich as a service)

Playback always starts on second row - possible off-by-one error? And a dedicated "Play from start" button would improve experience.

This is great! Someone like me who has no musical talent can make some pretty cool sounding stuff. https://music-grid.surge.sh/#512-2052-2048-0-2560-0-0-2304-0...

This is awesome. I've been playing around with svelte + webaudio myself lately, it's a really fun combo in case anyone here is wondering.

My song: https://music-grid.surge.sh/#0-1024-128-1024-128-1056-128-10...

What resources have you found helpful for learning/playing with webaudio?

I like your song!

For anyone surprised that their random plotting sounds good, see this comment: https://news.ycombinator.com/item?id=23514783

This is not like pressing random keys on a piano. Since it's just one fixed scale everything will automatically sound good but also very similar.

This is really cool, I enjoyed a lot creating my masterpiece: https://music-grid.surge.sh/#1-1344-2709-2690-2708-1352-16-2...

Reminds me a little of the backing music from the old Monkey Island games :)

I wish there was a guided path from this playful but limited introduction to computer assisted music to full-fledged products like Ableton Live.

https://music-grid.surge.sh/#2-1-2050-260-258-2312-66-2056-3...

https://learningmusic.ableton.com/

https://music-grid.surge.sh/#68-270-0-24-64-152-226-0-194-78...

Looks like a great way to create indie game music

https://music-grid.surge.sh/#224-0-1793-3088-1796-3136-1800-...

This is cool! Here's a hello world song, written vertically. The 'w' looks weird tho.

https://music-grid.surge.sh/#4030-524-4030-0-4030-2722-2750-...

pretty fun https://music-grid.surge.sh/#2066-1032-516-258-640-1093-2080...

I wish the grid didn't clear when you changed the size, but I understand why that might have been the choice.

Fast paced: https://music-grid.surge.sh/#384-2048-320-2432-0-2624-0-2624...

Had a lot of fun with this. Took few minutes to come up with this: https://music-grid.surge.sh/#16-68-2112-2056-2069-0-1152-102...

I don't have a musical bone in my body, but made this in a minute or two and really happy with it.

https://music-grid.surge.sh/#16-128-0-8-256-32-1024-128-0-10...

nice, feels like the song is shifting

I always love these kind of sites/apps. Here’s my little masterpiece:

https://music-grid.surge.sh/#274-72-292-1168-2-584-130-1060-...

Did anyone try this using AirPods Pro? On the iPhone’s speaker it sounds fine, on the AirPods I hear a lot of crackling noises between notes. Maybe the successive playback and stop of individual sounds messes up something in the compression used by the AirPods??

Could it be the audio stream stopping and starting in gaps, rather than playing silence, causing power saving to kick in and briefly stop the Bluetooth stream?

Exactly what I was trying to say but in much better words.

Wired headphones win again.

Neat. Here's my composition: https://music-grid.surge.sh/#10-164-80-288-0-208-552-1024-29...

This surprisingly came out good! https://music-grid.surge.sh/#3344-64-0-3344-0-1089-0-3096-0-...

There's something to it :) https://music-grid.surge.sh/#161-257-257-0-513-520-4-136-128...

Love these things - https://music-grid.surge.sh/#2049-2048-1-2050-1024-2592-3344...

https://music-grid.surge.sh/#2665-3396-2337-1108-2336-1041-2... Makes a nice background noise I guess

Simple tune that leads the loop with a simple melody

https://music-grid.surge.sh/#4-0-4-0-64-0-288-0-2-3740-0-260...

Very cool! Would be fun to add a MIDI export feature, could use my MidiWriter library https://github.com/grimmdude/MidiWriterJS

Slow, background idea https://music-grid.surge.sh/#148-1312-0-656-4-8-2048-0-552-2...

16 rows: https://music-grid.surge.sh/#1088-260-672-1024-9-258-4-72-16...

Reminds me of FTL music.

This was fun https://music-grid.surge.sh/#2080-4-1058-1-1060-264-129-544-...

My meager composition: https://music-grid.surge.sh/#320-512-320-512-128-320-160-336...

https://music-grid.surge.sh/#17-2082-17-2080-32-2048-34-2304...

I love this, here's mine:

https://music-grid.surge.sh/#0-33-1024-1024-0-3092-3108-0-17...

https://music-grid.surge.sh/#0-1040-528-256-576-1058-1088-10...

https://music-grid.surge.sh/#320-576-512-514-514-512-1024-20...

here's another take: https://music-grid.surge.sh/#512-1026-16-512-1024-536-0-576-...

https://music-grid.surge.sh/#3759-3423-3759-3927-84-42-21-23...

https://music-grid.surge.sh/#8-16-32-168-4-16-64-340-32-64-3...

https://music-grid.surge.sh/#0-0-0-1024-512-0-64-0-2560-2304...

https://music-grid.surge.sh/#0-2385-0-1192-64-2688-0-64-32-1...

Loading Music

https://music-grid.surge.sh/#0-4-0-1024-2048-256-0-0-512-0-0...

https://music-grid.surge.sh/#0-128-32-4-64-4-64-32-128-512-8...

looks like a tenori-on:

https://en.wikipedia.org/wiki/Yamaha_Tenori-on

Did my first javascript step with something like this :) https://dorev.io/

This is really fun! I do wish I could adjust the intervals and/or change the key. Everything I make sounds like 90s JRPG music.

I'm sure I used to have this as an Android app like, 10 years ago. Can anyone remember what it might have been called?

In many music programs such grid is called "piano roll", only it's usually oriented horizontally.

Except it's not a piano roll.

What are the key differences?

A piano roll shows every key. This 'roll' is a scale

Once I added a bunch of notes, it seemed like the player was dropping some. Maybe channel limitations?

this is nice site; hear some - https://music-grid.surge.sh/#32-8-512-64-256-32-257-512-8-25...

If I was a bit more musically talented I'd work out how to do a rickroll with this.

c64 https://music-grid.surge.sh/#2240-304-1032-258-2177-64-1066-...

I’ve listened to every link on this page and they all sound amazing. Nice work on this!

"Hit Play button. You'll figure it out ;)"

Peak user instructions. Overall, great job :)

nice

https://music-grid.surge.sh/#1024-1024-1064-320-1024-133-106...

You should flip the axes — time on the horizontal and note scale on the vertical

The way it is now is a lot more mobile friendly.

Doesn't seem to work on mobile Safari :( UI works but there's no sound

I made something totally random and it still sounds good! https://music-grid.surge.sh/#0-0-512-8-128-4-256-64-0-516-14...

Please add save function, I really love the rhythms, really amazing tool!

Just bookmark the page to save it. It updates the URL with every change.

There's no going back.

I like making music this way.

Have you tried automating it? "Generative music"

Please someone transcribe "The Lick" for this medium.

The BPM setting is weird if it's not based on 16th notes.

This kills my browsers back button history. Frustrating.

very cool and simple. If you don't have a perfect pitch how do you know which notes you are playing?

Should I assumed the first column is the middle C?

Freezes on iPhone 6s, the music stays on though.

Would be nice to be able to download a midi

It's cool that anything sounds great

Request: Super Mario theme

Here We Go! https://music-grid.surge.sh/#0-2048-0-144-1072-0-40-530-0-26...

Earlier attempt before I just kept the most recognizable bits and tweaked them by hand... https://tinyurl.com/mariogrid

Once your ears have cringed enough, go here and click Preview/Import then the Play button: https://tinyurl.com/mariobetter

Not possible with the scale this app uses.

Well, this didn't work work quite as well as I'd hoped:

https://music-grid.surge.sh/#1152-32-512-32-152-0-148-0-266-... 1-0-50-0-146-0-656-0-656-648-0-656-0-656-0-0-1568-0-0-656-0-0-552-0-0-0-528-0-0-0-34-0-1058-1064-0-1058-0-1058-1058-0-2048-0-144-1072-0-40-530-0-268-24-0-1048-0-24-2072-0-2048-0-0-1024-0-0-512-18-268-24-0-1048-0-24-2072-0-2048-0-144-1072-0-40-530-0-268-24-0-1048-0-24-2072-0-1024-0-512-512-0-0-168-0-0-292-0-0-276-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-512-0-5-5-0-5-0-138-512-20-6-518-4-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-1024-0-512-512-0-0-168-0-0-292-0-0-276-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-512-0-5-5-0-5-0-138-512-20-6-518-4-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-0-656-164-296-0-146-0-50-146-0-41-0-50-0-146-0-656-0-656-648-0-656-0-656-0-0-1568-0-0-656-0-0-552-0-0-656-164-296-0-146-0-50-146-0-41-0-50-0-146-0-656-0-656-648-0-656-0-656-0-0-1568-0-0-656-0-0-552-0-0-0-1152-32-512-32-152-0-148-0-266-0-518-518-0-6-544-0-512-128-176-10-512-10-560-0-176-0-512-560-0-24-1034-0-512-128-176-48-512-24-522-0-6-128-4-515-5 12-3-0-3-1056-0-512-128-176-10-512-10-560-0-176-0-512-560-0-24-1034-0-0-0-528-0-0-0-34-0-1058-1064-0-1058-0-1058-1058-0-2048-0-144-1072-0-40-530-0-268-24-0-1048-0-24-2072-0-2048-0-0-1024-0-0-512-18-268-24-0-1048-0-24-2072-0-2048-0-144-1072-0-40-530-0-268-24-0-1048-0-24-2072-0-0-0-1152-32-512-32-152-0-148-0-266-0-518-518-0-6-544-0-512-128-176-10-512-10-560-0-176-0-512-560-0-24-1034-0-512-128-176-48-512-24-522-0-6-128-4-515-512-3-0-3-1056-0-512-128-176-10-512-10-560-0-176-0-512-560-0-24-1034-0-0-0-1152-32-512-32-152-0-148-0-266-0-518-518-0-6-544-0-512-128-176-10-512-10-560-0-176-0-512-560-0-24-1034-0-512-128-176-48-512-24-522-0-6-128-4-515-512-3-0-3-1056-0-512-128-176-10-512-10-560-0-176-0-512-560-0-24-1034-0-0-656-164-296-0-146-0-50-146-0-41-0-50-0-146-0-656-0-656-648-0-656-0-656-0-0-1568-0-0-656-0-0-552-0-0-656-164-296-0-146-0-50-146-0-41-0-50-0-146-0-656-0-656-648-0-656-0-656-0-0-1568-0-0-656-0-0-552-0-0-0-528-0-0-0-34-0-1058-1064-0-1058-0-1058-1058-0-2048-0-144-1072-0-40-530-0-268-24-0-1048-0-24-2072-0-2048- 0-0-1024-0-0-512-18-268-24-0-1048-0-24-2072-0-2048-0-144-1072-0-40-530-0-268-24-0-1048-0-24-2072-0-1024-0-512-512-0-0-168-0-0-292-0-0-276-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-512-0-5-5-0-5-0-138-512-20-6-518-4-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-1024-0-512-512-0-0-168-0-0-292-0-0-276-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-512-0-5-5-0-5-0-138-512-20-6-518-4-0-1024-36-552-144-128-152-48-48-512-10-128-20-6-518-4-0-1024-0-0-656-164-296-0-146-0-50-146-0-41-0-50-0-146-0-656-0-656-648-0-656-0-656-0-0-1568-0-0-656-0-0-552-0-0-656-164-296-0-146-0-50-146-0-41-0-50-0-146-0-656-0-656-648-0-656-0-656-0-0-1568-0-0-656-0-0-552-0-0-0-528-0-0-0-34-0-1058-1064-0-1058-0-1058-1058-&399

I wish that it would let me drag and select

I've been working on an IDE for music composition http://ngrid.io. I'll release it soon.

Reply on news.ycombinator.com