jsfxr sequencer

I didn't go into this weekend with a project, but I woke up Saturday with an idea I couldn't get out of my head — I want to write a music sequencer with a really low footprint for use next month in the js13k game competition.

I've written about js13k before, and took part last year. This time around I want to be a bit more prepared, and I wanted to make a tool that would make it easier for the community to make cool stuff!

So this weekend I've been working on a bunch of different tools to make this project a reality.

Mini Sequencer

Mini sequencer is exactly that: a mini sequencer implementation that can play sounds at various times to form tunes.

This was my first mini project, as I was interested to see what the performance of web audio would be like; it's surprisingly good. That said, if I get time I'd like to look into replacing it with the Web Audio API, as it's a lot less hacky and should perform better.


jsfxr is a little 8 bit synth which was implemented a few years ago for use in the js13k competition.

Since this is probably what most of my sounds are going to be implemented by, I wanted to be able to create new sounds from my sequencer. While there's a few sites out there (my favourite by Super Flash Bros) that let you adjust sliders and make new sounds, there's not actually an out-of-the-box tool you can use to plug into your own project.

So after a bit of reverse engineering of as3fxr (the original Flash version), now there is.

This actually took up a whole bunch of my time, and if I were a project manager I would have dropped this to focus on other stuff, but hindsight, right?

Fruity Timeline

I got to the end of the weekend and felt like I hadn't really ended up with much to show off.

The timeline was one of the big things I'd been putting off doing because it's slightly weird and I wasn't quite sure how to tackle it, so I went all-out and implemented a standalone component (depends on jQuery but probably doesn't need to).

I'm pretty proud of this one, it's styled reminiscent of the old Fruity Loops sequencer and just looks a bit retro.

The main event

So despite having made a million things this weekend, I haven't actually finished the project I set out to do. Right now I have:

  • Create & manage a library of instruments (with jsfxr editing built in)
  • A super rudimentary timeline (edit some JSON by hand and the music will update)
  • BPM adjustment.

Things I need to do from here:

  • Plug in the actual fruity timeline so you can edit your song visually.
  • Implement a "piano roll" feature so you can have different pitches of the same instrument.
  • Stop/play/seek functionality
  • Export your file
  • Load up proper audio files (mp3/wav/whatever) so you can play with those too.

It looks like there's a lot there left to do, but I think I'll be able to get a minimum viable product done with another weekend. I'm not sure if I want to publish the code yet since it's a massive pigsty, but I'll aim to get something out before next weekend is through.

Edit: Ended up getting something together Sunday night. Try it out.