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 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?
- Have a play with the jsfxr editor and see if you come up with and decent sounds.
- Otherwise, find jsfxr-editor source on GitHub
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.
- Have a play with the timeline demo, doesn’t do much but it looks cool.
- Otherwise, find Fruity Timeline source on GitHub
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.