Hello! As for every project I work on this year, I'm making a weekly devlog. I'm therefor proud to present you Joy Phases!

Joy Phases is a musical sequencer that uses phasing to create emergent melodies. It is inspired by this fantastic codepen, and Steve Reich's phase music. Basically, phase music is composed of two tracks playing a short loop. However, one track is slightly faster than the other, so quickly the two become unsync and create new patterns. One great example is Piano Phase. Alternatively, the second track can also be shifted "on beat to the left", such as in Clapping Music or this version of Piano Phase. It's a pretty cool technique to change a melody in a surprising way.

So my goal is to create a sequencer that would allow users to make their own phase music. Either by writing a melody they know, or trying notes randomly. And they will be able to change the tonic and the scale, to create rich music. Eventually they will be able to share their creations, or even (if I find a way) export them to MIDI.

I'm making it in HTML5 and JS. I'm using Tone.js and VueX. Tone.js is a practical choice: it's a great music library, that I've used on my previous project. It allows to easily create instrument, and also sequencing events with a metronome (this will sure be very handy). As for VueX, it's a bit because I want to learn it. As a front-end web dev, it can't be bad! I already like Vue, and a solid flow structure will be necessary to easily manage the application's parameters (scale, signature, notes, phase…).

I've been working on it for a week, on my spare time. Progress has been made surprisingly fast! I already have a first prototype:

Of course, the sound is temporary. Next week, I intend to create some nicer instruments, using some actual samples. Also, this needs a UI to change the signature and the BPM.

One more important thing that I have to implement is the editing of each sequence. Every four measures, on top of the phasing, it would be great if the user had a way to change the scale automatically! This way they would be able to compose complex music. The question is: how to design the UI to remain both ergonomic and user-friendly?

Until then, see you next week!

Last week was quite a busy week. This unfortunately means that I couldn't achieved what I planned. But I still managed to do the essential.

First, the instruments. The synth has been replaced by two sampled instruments: xylophone and piano. Although for reasons I can't explain, the xylophone is glitched on Firefox and only comes out from the left speaker (even while the samples are perfectly fine). Well, I'll find other samples, in hope that it will fix that. Also, I tried to manually create a synth with Tone… But couldn't get the lowpass filter to work correctly. So I plan to use a very simple workaround: create my own sound with an appropriate software (LMMS will do just fine), then use ot a sample! Easy.

Secondly, I added the missing UI elements. You can now edit the signature, the BPM, and the instrument. For now it looks like this:

VueX makes this kind of controls quite easy to add! Once the state and actions are defined, everything just updates by itself. It's nice. The only difficulty was the BPM. For some reason, Tone.JS would sometimes stop when the BPM is edited. So I came up with a pretty ugly solution, but that fix the issue: before changing the BPM, I stop the sequencer, then make play it again. Then, I wait one beat (with a timeout), and if the sequencer has stopped, I start it again. Weird, but… It does the trick.

Finally, I started to implement the “sheet“. Basically, each sequence of four measures will have its own tonic and scale, that the user will be able to edit. The controls are not here yet, but I already implemented the logic.

So next week, I'll work on this part of the UI! Also, maybe I will begin to work on design? It's time to think of a proper layout. See you next time!

So, we have now a working beta! Check it out!

The UI and design are now way better defined. There is still some bits that need to be added, but the global layout is here.

The app is divided in three groups The first one is the rhythme. Since this will define the length of the melody, and the number of sections, it should be the first thing the user interact with. For now it is quite basic, but I intend to display more information in the future. Letting know that changing the signature will clear the sequencer, and maybe indicating the number of sections and the estimated length of the music. Also, for now 4 / 4 is selected by default at the beginning, but I think I will let the user select its own signature before displaying anything else.

Then there is the sequencer, which is the main part. Colors were a bit tricky to find, but I think I found a nice balance. Maybe the notes on the left are not readable enough… But I don't want to give them too much emphasis. You can also see that I like putting rounded corners absolutely everywhere. For now, the UI allows to change the tonic and mode, but this does not have any impact on the sections below. More on that later, but I want to implement a way to allow the user to edit the sequencer and the sections at the same time. Also, it needs a "Play" button to just listen to the melody without triggering the phasing. Final point I should mention: the sequencer is quite big. I want it to be, I find it more friendly this way. But that means that there is some scrolling on lower resolutions… I definitely want to fix that.

Finally, the sections. With a good ol' flexbox to align them (this feature is so great, as well as CSS Grid). I would have like all sections to fit on one line… But unfortunately that just couldn't be done. It needs some space to breathe. As for the controls, I kept it simple. Initially, I intended a lot of shortcuts. A way to initialize every sections to the current scale, a button to copy the scale of the previous section… But that was a bit too complex to understand. By using it, I realized that while setting a tonic and a mode manually for each section is fastidious, it is also the most simple way to write the partition, and the most easy to understand! However, I will still make a button to copy the scale from the sequencer to all sections. And one to allow the sequencer to have an impact on one of several sections? Maybe while it's playing… Also, there will be a way to jum directly from one section to another.

For now, there is a big issue that you might notice: the keyboard controls are terrible! Not only the focus is not clear, but editing the sequencer is also a nightmare. I should try to implement a way to navigate it with the arrow keys… After all, the goal of this application is to allow everyone to create music. So accessibility is extremely important!

Finally, a little improvement: the xylophone has been fixed and play in stereo! Turns out the samples were actually mono. So the brute solution was to make them stereo one by one with Audacity (eh, there's not a lot of them). Glad that is cleared.

What's next? Well, my priority will be all the little UI improvements I mentioned. Including the keyboard controls, which will be a tough one. Then we'll get to something exciting: a way to export and import created music!

In the meanwhile, have fun with the beta. If you have any feedback, I will be happy to read them.