okay this submission scope crept wildly out of control from what i first intended (which was to make a song normally using a tracker or fl studio)

but then I wondered: would it be possible to collect performance timing info from a running cohost page and transmute that into bleeps and bloops

12 hours later here we are. the attached mp3 is some snippets from a live session which I then applied some effects in an attempt to make it a little more interesting. i feel like it could be ...more but I already spent way way longer than I wanted to on this.

here's a recording i took of that session: https://www.youtube.com/watch?v=OYWbECB1FRQ
partway through I scroll around to cause more network requests to happen to be included in the set of notes each loop.

the code's over here if you're curious. if you want to try it yourself (it should work on any website!) there are instructions there too.

at a high level here's what this is doing:

1. collect performance entries from the current page via window.performance.getEntries() and get their timings
2. divide a measure into a number of 'buckets' (i don't know music theory)
3. define the set of buckets; the number of measures * the number of buckets per measure
4. try to fit the perf entries into a bucket. if they go past the end, they wrap around until they fit into a bucket (modulo)
5. depending on which measure a bucket is in, drop some of its items randomly ('sample factor')
6. stitch together a composition based on a specified ordering of measures. for example [0,1,0,2,0,1,0,3] will repeat the first measure 4 times, the second measure 2 times, and the third and fourth measures will play once
7. go through the measures in order and transform the perf entries into notes:
   a. group entries in a bucket by content type.
   b. the content type map defines some properties that the note will have, like the shape of the wave and some multipliers
   c. multiply the transfer size of the entry (e.g. if downloading a png, how big it was), and come up with a frequency using the mapping sizePitchFactor and pitchCap
   d. map that pitch to the nearest note by using the tonal library (many of the following operations will also use tonal)
   e. map that note into the nearest note that is in the current key's scale
   f. emit a note
   g. if there were other entries with the same content type at the same time, try to find a matching chord in the key
   h. take n notes from that chord where n is the number of other entries
8. play them in order until reaching the end of a loop. then the process repeats if 'play' is checked.

I should have expected that this would take a lot of effort since it's my first attempt at procedurally generated music and i have no idea what i'm doing, but... welp. it feels appropriate though

today and yesterday i wrote this procedural music generator in less than 100 lines of code. really, it's all thanks to faudio, my friend evan, and his engine moonworks.

basically this can generate infinite breakcore/dnb (or whatever, thats just the stems i made because the genre works well for this method) without having to keep track of the song tempo or anything. evan built a sound queue API for moonworks for me (which is itself only about 120 lines). this allowed me to build a music generator that just plays short stem clips one after another for each of the parts (in this case bass, pad, and break). it's super flexible and should also work even if the clips aren't the same length as long as they're the same tempo and time signature. i'm planning to make a lot more clips for the machine and to write some more detailed logic for how it selects clips to let it smoothly change keys and generate music that has some more structure, but it already sounds pretty ok considering it took me a couple of hours to write the code and like, 15 minutes to make the stems.

full code beneath the readmore: