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.