[Feature] Step Sequencer

[spen]

Let's add a step sequencer, so people can plot out melodies and hear them being played on the handpan. This'll be a big task, so let's discuss it here and start breaking it all down and thinking about how we would structure HTML for a step sequencer similar to this of Apple's Logic Pro:

For starters, I can see we need some sort of structure like this:

<StepSequencer> // the container
  <Lanes> // The list of lanes
    <Lane />
    <Lane />
    <Lane />
  </Lanes>
<StepSequencer>

Where each lane will then need to contain cells that show whether it is on or off. Let's flesh that all out and chat about it here.

Some existing projects:

• https://github.com/michd/step-sequencer
• https://github.com/sam-parsons/react-step-sequencer
• https://github.com/Web-Multi-Media/multi-web-audio-sequencer

[SandyWyper]

Had a very brief look into the react-step-sequencer. Looks fairly beefy. So, without melting my brain, how do think we should tackle this?

• Layout consist of a table of buttons that toggle on and off. X-axis for time/beats and Y-axis for different notes.
• Squares are buttons that toggle on and off.

When a button is toggled it adds an value to a JSON object ......? How would you handle this data? Does it have to be ordered specially for whatever playback software we're using, if any?

[spen]

I've made a start with this today and it's mostly working:

Still, there's plenty to be done, this is still pretty basic and for now it just triggers a sound (we'll do more with it in the future like live highlighting the notes on the handpan etc.

I'll be pushing code up soon :)

As for buttons being toggled, we'd need to hold those values in an object (or array) in state. I'll leave a comment on the PR when the code's up to show where that's happening and how we'd need to update it to allow for toggling (right now it's just static state that you can't edit in the app)

[spen]

PR: https://github.com/spen/Handpan/pull/10