
Music Grid - SeventhEpoch
https://music-grid.surge.sh
======
bradleybuda
My magnum opus: [https://music-
grid.surge.sh/#1352-1348-2568-2576-1290-1288-2...](https://music-
grid.surge.sh/#1352-1348-2568-2576-1290-1288-2565-2564-1352-1348-2568-2576-1290-1416-2565-2564-1352-1348-2568-2576-1290-1288-2565-2564-1352-1348-2568-2576-1290-1288-2565-2564-1352-1352-2704-2704-1352-1352-2704-2704-1352-1352-2704-2704-1352-1352-2704-2704-1344-1344-2688-2688-1344-1344-2688-2688-1344-1344-2688-2688-1344-1344-2688-2688-1280-1280-2560-2560-1280-1280-2560-2560-1280-1280-2560-2560-1280-1280-2560-2560-1024-1024-2048-2048-1024-1024-2048-2048-1024-1024-2048-2048-1024-1024-2048-2048-&400)

~~~
jonplackett
[https://music-
grid.surge.sh/#2281-3241-2217-3759-0-2866-2325...](https://music-
grid.surge.sh/#2281-3241-2217-3759-0-2866-2325-2869-549-2866-0-1707-1193-1257-3714-1163-&183)

~~~
SCUSKU
Mozart, is that you?

~~~
jonplackett
[https://music-
grid.surge.sh/#224-16-224-128-112-0-240-128-22...](https://music-
grid.surge.sh/#224-16-224-128-112-0-240-128-224-128-240-0-240-16-240-144-&183)

------
aalazz
[https://music-
grid.surge.sh/#1028-680-4-1024-1028-1152-2080-...](https://music-
grid.surge.sh/#1028-680-4-1024-1028-1152-2080-16-584-0-1152-1028-0-1200-0-2048-&446)

~~~
moron4hire
I like this one. It has a nice rhythm to it, like a chase scene in an 8-bit
video game.

~~~
terrycody
+1 I really love the rhythm and think whether it can be saved for later use? I
can't find any download button, ymmmmm

~~~
analog31
The sequence is encoded in the web link

------
superfrank
Welp... My first reaction was to draw a penis and it didn't turn out bad at
all, IMO

[https://music-
grid.surge.sh/#2114-1365-2730-1365-2730-2322-2...](https://music-
grid.surge.sh/#2114-1365-2730-1365-2730-2322-2322-1884-272-336-272-496-272-336-160-64-&269)

~~~
ybbond
surprisingly sounds ecstastic

------
ricardobeat
Really nice! Props for Svelte.

A one minute doodle: [https://music-
grid.surge.sh/#41-512-320-2597-840-64-512-1189...](https://music-
grid.surge.sh/#41-512-320-2597-840-64-512-1189-136-56-1324-1088-105-160-2568-2596-&200)

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.

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

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

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

------
bfdm
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...](https://music-
grid.surge.sh/#1285-2-2570-68-528-16-2592-64-522-0-3592-520-772-1-2849-0-&273)

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

~~~
CraigJPerry
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)

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

------
alkonaut
I like the beautiful design finish of Tones.fm
[https://www.tones.fm/](https://www.tones.fm/)

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

~~~
jowsie
Same for me on chrome/win10

------
roland35
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...](https://play.google.com/store/apps/details?id=com.njnelson.tonegridgdx.android)

~~~
maxlaumeister
> 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/](https://www.maxlaumeister.com/tonematrix/)

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

------
mellowdream
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](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 :)

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

~~~
aasasd
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=X-ygv1CKzAk)

[https://youtube.com/watch?v=tzoMNOids7k](https://youtube.com/watch?v=tzoMNOids7k)

------
DecoPerson
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...](https://music-
grid.surge.sh/#64-2691-64-2694-32-2380-32-2368-0-1219-0-678-0-2220-0-1185-66-1665-66-1665-2-1348-8-1360-32-1728-32-1680-8-1348-2-1345-&200)

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

[https://gist.github.com/jedberg/37e9680806bc517925daeaae4798...](https://gist.github.com/jedberg/37e9680806bc517925daeaae4798eb9e)

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

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

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

~~~
yesenadam
Yeah, except with no F.

------
XCSme
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-...](https://music-
grid.surge.sh/#521-80-0-2121-512-552-0-2114-0-2192-0-2050-580-2560-8-2064-&479)

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

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

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

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

------
asurty
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...](https://music-
grid.surge.sh/#256-80-256-40-256-32-256-288-128-32-256-64-256-128-256-160-&200)

~~~
tomlue
I added to yours! Fun! [https://music-
grid.surge.sh/#272-80-256-40-256-32-256-288-13...](https://music-
grid.surge.sh/#272-80-256-40-256-32-256-288-130-40-258-72-260-136-261-160-&200)

~~~
mkaic
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...](https://music-
grid.surge.sh/#2320-2128-2304-2088-1280-1056-1280-1312-2178-2088-2306-2120-1284-1160-1285-1184-&200)

~~~
erklik
Is this what collaborative open source music creation looks like?

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

~~~
swagasaurus-rex
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...](https://music-
grid.surge.sh/#0-0-0-1025-1-2-4-8-16-32-64-128-256-512-1024-2048-&200)

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

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

~~~
irshadshalu
That sounds like a good idea.

[https://github.com/irshadshalu/music-
grid/issues/12](https://github.com/irshadshalu/music-grid/issues/12)

------
h13g
Commenting for posterity:

[https://music-
grid.surge.sh/#128-16-0-16-128-16-0-528-0-16-0...](https://music-
grid.surge.sh/#128-16-0-16-128-16-0-528-0-16-0-64-256-32-64-128-&200)

------
staz
I really like it. [https://music-
grid.surge.sh/#192-16-1024-1024-1-160-192-128-...](https://music-
grid.surge.sh/#192-16-1024-1024-1-160-192-128-128-128-0-544-0-2056-64-128-&248)

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-...](https://askubuntu.com/questions/229352/how-to-record-output-to-
speakers)

------
gfxgirl
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...](https://www.google.com/logos/2017/fischinger/fischinger17.html)

Here's Ableton's

[https://learningmusic.ableton.com/](https://learningmusic.ableton.com/)

Is there something special about this one?

~~~
__max__
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...](http://maximecb.github.io/MusicToy/#aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiaaaaaaieaaaaaiecaaaaiecbiiiiecbaeeeecbaaccccbaaabbbbaaaabbbbbbbbaaaappppaaaaaaaaaaaaaaab)

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/](https://mt2.musictools.live/)

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

~~~
gregschlom
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](http://lab.andre-michelle.com/ToneMatrix)

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

[https://www.maxlaumeister.com/tonematrix/](https://www.maxlaumeister.com/tonematrix/)

------
moron4hire
[https://music-
grid.surge.sh/#1024-2049-2624-0-512-3330-2112-...](https://music-
grid.surge.sh/#1024-2049-2624-0-512-3330-2112-32-592-2049-2048-18-512-2050-2084-64-544-2193-2048-0-672-2114-2080-144-512-2049-2336-16-544-2370-2048-0-1104-1-2048-20-1024-1-2120-4-1032-145-2048-0-1280-1-2048-640-1040-33-2368-0-1024-289-2048-0-1152-1-2048-2560-&500-1024-289-2048-0-1152-1-2048-2560-&500)

------
wbillingsley
[https://music-
grid.surge.sh/#584-584-288-144-72-544-32-544-2...](https://music-
grid.surge.sh/#584-584-288-144-72-544-32-544-2050-2050-512-256-256-264-328-328-&200)

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](https://g.co/doodle/2c2ydxw)

~~~
rishav_sharan
Why must you bring this evil into our midst!

------
jonplackett
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...](https://music-
grid.surge.sh/#162-2628-33-16-130-593-2048-388-66-40-132-1298-129-4-16-2689-&200)

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

~~~
axismundi
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!

~~~
jonplackett
Is it really that simple?

------
choma
When somebody ask me how to pronounce my username: [https://music-
grid.surge.sh/#384-320-128-0-384-64-384-64-384...](https://music-
grid.surge.sh/#384-320-128-0-384-64-384-64-384-0-128-320-128-0-256-128-448-0-144-264-144-96-&200)

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

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

------
Kye
I made a little RPG-y tune.

[https://music-
grid.surge.sh/#8-130-0-516-256-136-64-32-16-8-...](https://music-
grid.surge.sh/#8-130-0-516-256-136-64-32-16-8-0-32-16-0-16-128-0-32-128-0-8-128-0-32-128-1024-512-256-20-257-32-257-64-257-128-2304-0-2112-32-2064-8-2068-2-2064-4-2064-32-64-256-0-512-640-320-544-16-648-1028-2-256-648-1024-32-512-640-&243)

------
jedberg
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...](https://gist.github.com/jedberg/37e9680806bc517925daeaae4798eb9e)

------
tomquirk
Someone get me Deadmau5's number! [https://music-
grid.surge.sh/?fbclid=IwAR3Xc0-eQGjjQxebL2UJW4...](https://music-
grid.surge.sh/?fbclid=IwAR3Xc0-eQGjjQxebL2UJW4lKdvpf6JyG_3CLJ788nn9cXIrT5iPobmmq1vg#2626-2368-2626-2624-2640-1320-1316-1316-2368-2384-1352-1316-1312-2628-2624-2626-&239)

------
kangalioo
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...](https://music-
grid.surge.sh/#512-1024-0-2376-132-16-8-1188-64-32-16-2376-36-16-8-1188-64-16-8-164-2624-0-0-1320-2624-0-0-2625-1312-0-0-1320-&261)

~~~
kevin948
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-...](https://music-
grid.surge.sh/#0-1056-2048-32-64-64-1024-2176-128-0-1024-2112-32-64-0-0-256-512-1032-4-1028-2056-16-1024-2056-16-1024-2064-32-0-1024-2048-&255)

------
theon144
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...](https://music-
grid.surge.sh/#4-2048-8-2114-2-2370-2-2112-321-2560-5-2048-9-2096-45-2048-&200),
am happy

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

------
aaossa
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-...](https://music-
grid.surge.sh/#768-3092-768-3840-320-3092-320-3392-48-3078-48-3120-384-3078-384-3456-&353)

------
AnonC
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. :(

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

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

~~~
Kiro
That too but mostly the scale.

------
renewiltord
Amazing tool. So satisfying to make something [https://music-
grid.surge.sh/#2080-64-1280-2064-512-0-2080-0-...](https://music-
grid.surge.sh/#2080-64-1280-2064-512-0-2080-0-1024-2592-256-584-2048-1-1026-2052-&200)

------
JeanMarcS
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-...](https://music-
grid.surge.sh/#1040-2080-1088-32-16-136-64-32-17-2-4-136-68-546-1092-2184-&200)

------
arondeparon
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...](https://music-
grid.surge.sh/#392-0-392-1024-1-64-1056-1-64-1056-0-1-1024-64-32-1024-&200)

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

[https://music-
grid.surge.sh/#644-8-2304-660-0-2372-672-14-12...](https://music-
grid.surge.sh/#644-8-2304-660-0-2372-672-14-1280-2192-2-1312-2192-8-1280-&324)

------
gremlinsinc
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...](https://music-
grid.surge.sh/#360-336-168-336-4095-8-330-8-3579-1088-269-1098-328-1074-322-1104-269-322-64-1284-72-80-260-72-1360-4-264-81-1346-4-256-72-2116-258-1224-68-2818-160-592-1056-512-1056-84-648-276-0-1108-2560-192-2560-192-2560-192-2560-192-2560-0-640-128-256-320-512-576-0-1088-128-2184-856-0-1152-1152-512-384-160-1120-1088-640-1408-256-512-512-1024-1088-592-512-336-320-144-128-848-1088-1152-128-832-64-320-1344-256-640-128-&337)

------
rcoveson
Great fun. Love the shareable URLs.

[https://music-
grid.surge.sh/#1-1282-1-1280-2056-1044-2056-10...](https://music-
grid.surge.sh/#1-1282-1-1280-2056-1044-2056-1044-2056-4-2048-1024-2-512-8-2564-&250)

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

~~~
kilnr
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/#2050-8-256-128-2112-32-72-36-2048-512-1026-513-2312-132-258-1-2114-136-32-64-2064-32-72-4-2064-32-66-33-2120-132-2-129-2306-136-64-32-2112-0-8-4-2048-0-2-1-2056-4-2-1-2050-8-0-0-2048-0-8-4-2048-0-2-1-2056-4-2-1-&200)

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

[https://www.maxlaumeister.com/tonematrix/](https://www.maxlaumeister.com/tonematrix/)

I love what you did with the adjustable column length.

~~~
utopcell
Yours looks more refined I'd say.

------
arvinaminpour
My masterpiece [https://music-
grid.surge.sh/#2569-20-130-0-40-64-544-21-72-1...](https://music-
grid.surge.sh/#2569-20-130-0-40-64-544-21-72-160-5-160-8-80-42-1344-&266)

------
alexandercrohde
[https://music-
grid.surge.sh/#1152-128-1152-128-1280-648-320-...](https://music-
grid.surge.sh/#1152-128-1152-128-1280-648-320-322-129-80-136-256-160-16-136-68-&243)

------
slewis
[https://music-
grid.surge.sh/#64-544-264-16-1152-4-64-528-66-...](https://music-
grid.surge.sh/#64-544-264-16-1152-4-64-528-66-257-1056-16-68-256-264-1028-&364)

------
702pjc
[https://music-
grid.surge.sh/#17-2114-4-2208-20-2048-20-2112-...](https://music-
grid.surge.sh/#17-2114-4-2208-20-2048-20-2112-164-2178-1-2048-64-2208-0-2208-&237)

------
scrozier
[https://music-
grid.surge.sh/#26-2561-71-711-26-2592-23-663-4...](https://music-
grid.surge.sh/#26-2561-71-711-26-2592-23-663-43-2561-134-743-27-2593-39-711-&239)

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

------
_def
[https://music-
grid.surge.sh/#36-64-18-64-260-64-1040-260-0-3...](https://music-
grid.surge.sh/#36-64-18-64-260-64-1040-260-0-32-517-80-640-8-82-0-&200)

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

~~~
irshadshalu
Made this change. Thank you!

------
pinouchon
[https://music-
grid.surge.sh/#128-32-64-32-8-32-0-32-0-0-0-12...](https://music-
grid.surge.sh/#128-32-64-32-8-32-0-32-0-0-0-128-0-16-32-16-4-16-0-16-0-32-64-32-8-32-0-32-0-0-0-128-0-16-32-1)
[https://music-
grid.surge.sh/#320-0-320-1024-128-0-160-0-16-1...](https://music-
grid.surge.sh/#320-0-320-1024-128-0-160-0-16-160-16-0-160-16-160-16-160-0-&418)

------
vinnymac
If you liked this check out my friends project in a similar vein:
[https://geneticbeats.com/](https://geneticbeats.com/)

------
concernedCity
[https://music-
grid.surge.sh/#1184-1104-1280-2048-1344-512-51...](https://music-
grid.surge.sh/#1184-1104-1280-2048-1344-512-512-528-1280-2048-1284-1024-1280-2050-1280-1056-2372-2048-1312-1152-1096-2192-1188-1090-2084-2112-1153-1090-1281-2064-1032-1060-2114-2049-1056-1152-1032-2064-1060-1026-2052-2048-1153-1026-1313-2056-1040-1060-2114-2048-1056-1152-1032-2064-1060-1026-2564-2048-641-2-&246)

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

------
Kiro
For anyone surprised that their random plotting sounds good, see this comment:
[https://news.ycombinator.com/item?id=23514783](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.

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

------
cranium
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://music-
grid.surge.sh/#2-1-2050-260-258-2312-66-2056-34-2056-258-65-2082-20-18-2049-&323)

~~~
acarabott
[https://learningmusic.ableton.com/](https://learningmusic.ableton.com/)

------
karakanb
This is really cool, I enjoyed a lot creating my masterpiece: [https://music-
grid.surge.sh/#1-1344-2709-2690-2708-1352-16-2...](https://music-
grid.surge.sh/#1-1344-2709-2690-2708-1352-16-2688-2698-1361-2689-0-2690-1348-2704-2696-1344-2688-512-64-160-16-136-0-160-64-128-0-2688-1344-2688-2688-&323)

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

------
sudosteph
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...](https://music-
grid.surge.sh/#0-1024-128-1024-128-1056-128-1061-160-1065-0-1028-128-1064-162-1065-&126)

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

I like your song!

------
ipiz0618
[https://music-
grid.surge.sh/#68-270-0-24-64-152-226-0-194-78...](https://music-
grid.surge.sh/#68-270-0-24-64-152-226-0-194-784-0-1024-848-128-848-0-2304-832-1024-2048-1856-2048-832-1024-512-2176-32-48-0-80-8-516-2344-306-128-53-728-8-676-368-352-&296)

Looks like a great way to create indie game music

------
aherz
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...](https://music-
grid.surge.sh/#512-2052-2048-0-2560-0-0-2304-0-8-0-2080-32-48-0-256-8-256-0-68-256-128-72-514-64-576-64-516-0-64-0-64-64-64-&424)

------
ian0
[https://music-
grid.surge.sh/#224-0-1793-3088-1796-3136-1800-...](https://music-
grid.surge.sh/#224-0-1793-3088-1796-3136-1800-3136-1792-3616-2176-3072-3712-3584-1792-0-3840-0-236-0-1808-1794-0-1792-232-4-4-228-0-226-0-1920-0-1856-0-225-0-1792-0-1792-0-224-1792-1792-0-1792-&500)

------
markozivanovic
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-...](https://music-
grid.surge.sh/#4030-524-4030-0-4030-2722-2750-0-4030-172-186-0-4030-130-130-0-4030-2210-3996-0-&320)

------
zengid
pretty fun [https://music-
grid.surge.sh/#2066-1032-516-258-640-1093-2080...](https://music-
grid.surge.sh/#2066-1032-516-258-640-1093-2080-1088-648-256-512-1188-&200)

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

------
coronadisaster
I wish that it would let me drag and select

------
watsonkr
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-...](https://music-
grid.surge.sh/#274-72-292-1168-2-584-130-1060-72-146-512-73-144-292-516-1152-&200)

------
ramanova
There's something to it :) [https://music-
grid.surge.sh/#161-257-257-0-513-520-4-136-128...](https://music-
grid.surge.sh/#161-257-257-0-513-520-4-136-128-256-260-520-516-1032-1072-2080-&200)

------
zuminator
Fast paced: [https://music-
grid.surge.sh/#384-2048-320-2432-0-2624-0-2624...](https://music-
grid.surge.sh/#384-2048-320-2432-0-2624-0-2624-8-2562-1-2058-0-2082-0-2114-0-2176-256-2176-256-2048-0-2560-0-2052-0-2080-0-2112-128-2112-&500)

------
hrayr
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...](https://music-
grid.surge.sh/#16-68-2112-2056-2069-0-1152-1028-1092-2-2176-2176-64-1056-1024-&417)

------
shadycuz
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...](https://music-
grid.surge.sh/#16-128-0-8-256-32-1024-128-0-1024-&200)

~~~
singularity2001
nice, feels like the song is shifting

------
Pranz
Neat. Here's my composition: [https://music-
grid.surge.sh/#10-164-80-288-0-208-552-1024-29...](https://music-
grid.surge.sh/#10-164-80-288-0-208-552-1024-296-276-610-1032-2113-0-2320-2180-&149)

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

~~~
bonyt
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?

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

------
ElCapitanMarkla
Love these things - [https://music-
grid.surge.sh/#2049-2048-1-2050-1024-2592-3344...](https://music-
grid.surge.sh/#2049-2048-1-2050-1024-2592-3344-2048-64-2080-0-2128-3208-2320-1536-2048-&292)

------
anarchyrucks
This surprisingly came out good! [https://music-
grid.surge.sh/#3344-64-0-3344-0-1089-0-3096-0-...](https://music-
grid.surge.sh/#3344-64-0-3344-0-1089-0-3096-0-1089-16-3072-2048-2064-2048-2048-&500)

------
runald
[https://music-
grid.surge.sh/#2665-3396-2337-1108-2336-1041-2...](https://music-
grid.surge.sh/#2665-3396-2337-1108-2336-1041-2725-1040-2738-3113-&261) Makes a
nice background noise I guess

------
nxpnsv
This was fun [https://music-
grid.surge.sh/#2080-4-1058-1-1060-264-129-544-...](https://music-
grid.surge.sh/#2080-4-1058-1-1060-264-129-544-72-2052-66-512-1088-8-528-2114-&200)

------
arh68
16 rows: [https://music-
grid.surge.sh/#1088-260-672-1024-9-258-4-72-16...](https://music-
grid.surge.sh/#1088-260-672-1024-9-258-4-72-16-32-68-160-256-545-1024-2576-&200)

Reminds me of FTL music.

------
Kheyas
Slow, background idea [https://music-
grid.surge.sh/#148-1312-0-656-4-8-2048-0-552-2...](https://music-
grid.surge.sh/#148-1312-0-656-4-8-2048-0-552-2624-0-288-2624-0-1280-64-&200)

------
spectaclepiece
[https://music-
grid.surge.sh/#17-2082-17-2080-32-2048-34-2304...](https://music-
grid.surge.sh/#17-2082-17-2080-32-2048-34-2304-512-2304-514-2048-128-2560-258-2304-&250)

------
exabrial
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...](https://music-
grid.surge.sh/#4-0-4-0-64-0-288-0-2-3740-0-260-32-2-8-1444-&200)

------
mrb
My meager composition: [https://music-
grid.surge.sh/#320-512-320-512-128-320-160-336...](https://music-
grid.surge.sh/#320-512-320-512-128-320-160-336-168-324-160-1-&309)

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

------
lilgreenland
[https://music-
grid.surge.sh/#0-1040-528-256-576-1058-1088-10...](https://music-
grid.surge.sh/#0-1040-528-256-576-1058-1088-1058-512-8-520-512-288-580-1056-1092-&200)

------
tetris11
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-33-1024-1024-0-3092-3108-0-176-1024-256-76-0-512-0-0-&200)

------
jackielii
[https://music-
grid.surge.sh/#320-576-512-514-514-512-1024-20...](https://music-
grid.surge.sh/#320-576-512-514-514-512-1024-2048-160-0-384-0-516-512-1024-2048-&200)

------
KLVTZ
here's another take: [https://music-
grid.surge.sh/#512-1026-16-512-1024-536-0-576-...](https://music-
grid.surge.sh/#512-1026-16-512-1024-536-0-576-16-9-&212)

------
jpxw
[https://music-
grid.surge.sh/#3759-3423-3759-3927-84-42-21-23...](https://music-
grid.surge.sh/#3759-3423-3759-3927-84-42-21-2336-0-2-2336-0-8-2336-0-2340-&200)

------
4172i
[https://music-
grid.surge.sh/#8-16-32-168-4-16-64-340-32-64-3...](https://music-
grid.surge.sh/#8-16-32-168-4-16-64-340-32-64-32-16-672-512-64-1344-&200)

------
beisner
[https://music-
grid.surge.sh/#0-0-0-1024-512-0-64-0-2560-2304...](https://music-
grid.surge.sh/#0-0-0-1024-512-0-64-0-2560-2304-2-9-0-0-2048-2048-&411)

------
mhh__
[https://music-
grid.surge.sh/#0-2385-0-1192-64-2688-0-64-32-1...](https://music-
grid.surge.sh/#0-2385-0-1192-64-2688-0-64-32-16-512-2048-0-0-64-2692-&300)

Loading Music

------
drewjoh
[https://music-
grid.surge.sh/#0-4-0-1024-2048-256-0-0-512-0-0...](https://music-
grid.surge.sh/#0-4-0-1024-2048-256-0-0-512-0-0-32-0-0-1024-8-&200)

------
ayush000
[https://music-
grid.surge.sh/#0-128-32-4-64-4-64-32-128-512-8...](https://music-
grid.surge.sh/#0-128-32-4-64-4-64-32-128-512-8-512-&293)

------
riffic
looks like a tenori-on:

[https://en.wikipedia.org/wiki/Yamaha_Tenori-
on](https://en.wikipedia.org/wiki/Yamaha_Tenori-on)

------
dorev7
Did my first javascript step with something like this :)
[https://dorev.io/](https://dorev.io/)

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

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

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

~~~
jbverschoor
Except it's not a piano roll.

~~~
avodonosov
What are the key differences?

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

------
harry-s
this is nice site; hear some - [https://music-
grid.surge.sh/#32-8-512-64-256-32-257-512-8-25...](https://music-
grid.surge.sh/#32-8-512-64-256-32-257-512-8-256-16-2-644-8-16-512-&269)

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

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

------
singularity2001
c64 [https://music-
grid.surge.sh/#2240-304-1032-258-2177-64-1066-...](https://music-
grid.surge.sh/#2240-304-1032-258-2177-64-1066-64-2069-512-1280-554-2560-512-1109-512-&500)

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

------
jbverschoor
nice

[https://music-
grid.surge.sh/#1024-1024-1064-320-1024-133-106...](https://music-
grid.surge.sh/#1024-1024-1064-320-1024-133-1060-2344-1172-2048-1280-2112-1312-32-1024-2632-&200)

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

Peak user instructions. Overall, great job :)

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

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

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

~~~
andy318
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...](https://music-
grid.surge.sh/#0-0-512-8-128-4-256-64-0-516-144-32-0-1028-256-16-&200)

------
lamby
Please someone transcribe "The Lick" for this medium.

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

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

------
ratsimihah
There's no going back.

------
swayvil
I like making music this way.

Have you tried automating it? "Generative music"

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

------
person_of_color
This kills my browsers back button history. Frustrating.

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

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

------
d0100
Would be nice to be able to download a midi

------
d0m
It's cool that anything sounds great

------
exabrial
Request: Super Mario theme

~~~
rkagerer
Here We Go! [https://music-
grid.surge.sh/#0-2048-0-144-1072-0-40-530-0-26...](https://music-
grid.surge.sh/#0-2048-0-144-1072-0-40-530-0-268-24-0-1048-0-24-2072-0-2048-0-1024-0-0-512-18-0-268-24-0-1048-0-24-2072-0-0-2048-144-1072-0-40-530-0-268-24-0-1048-0-24-24-0-0-0-528-40-64-0-136-0-34-68-0-9-18-0-72-656-0-656-40-0-72-0-144-0-0-544-0-0-272-0-0-36-0-0-0-2304-0-0-0-17-0-1058-2084-0-1058-0-1058-1058-&399)

~~~
rkagerer
Earlier attempt before I just kept the most recognizable bits and tweaked them
by hand... [https://tinyurl.com/mariogrid](https://tinyurl.com/mariogrid)

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

------
rkagerer
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-...](https://music-
grid.surge.sh/#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-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-4)
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

------
adamnemecek
I've been working on an IDE for music composition
[http://ngrid.io](http://ngrid.io). I'll release it soon.

