css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Procedural Generation allows you to create unique infiniteness that can be consistently reproduced. Enter seed data (your name is a great place to start) and hear a unique, infinite, and reproducible song.

Everything is notated in flats instead of sharps for simplicity sake.

Still has the occasional bug. If it doesnt play anything, refresh and try a new seed.

abcjs | tone js | seedrandom


  1. I'm truly a fan of this thing.

  2. This is awesome! :)

    Nitpicking: 4/4 should only be repeated once, and no need for a | at the begin at a line. It normally looks something like this: Imgur

  3. @gillescastel that's a great point! for what it's worth, it bothers me as well.

    i was originally doing that by re-rendering the entire composition with abcjs each new set of measures, but that got unmanageable as the composition got longer. instead, i render the new measures independently as their own abcjs output. abcjs needs the 4/4 data to define the measures. unfortunately, abcjs automatically outputs the time signature whenever the time signature is defined.

    All that to say, I was able to hide them with CSS since the output is SVG.

    Removed the first bars too.

  4. This is so rad! My composition sounded like it was from the original Zelda.

  5. @jakealbaugh It would be super-cool if you could highlight the current notes being played. I switched windows for a minute, and when I came back, forgot where I was.

  6. @cssinate That would be incredible. abcjs can add class names to the elements, but they arent unique and the SVG output is kind of a mess to be honest. I may have to fork my own version and clean it up.

    However, it auto scrolls downwards when it starts playing an individual line of measures, so you can "pick it up" by waiting for that event and start reading at the beginning of the last set.

  7. Impressive! Loved the idea and the result. Great work, mate!!!

  8. var _v_key = "WeAddaBabyEetsABoy"; ... Excellent collect call commercial reference.

  9. does one specific seed always generate the same song?

  10. @alfonsofonso yes. i am using seedrandom so that the randomness is always the same for a given seed.

  11. This is one of the coolest things I have ever seen. Thank you

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.