Home

Music App Thing

(Designed primarily with mobiles in mind)

What this does?

Originally I was just going to do a straight up replica of a Teenage Engineering Pocket Operator, but as I was using it very early on I realised it'd be way more fun to make something based on that kind of premise but designed to work on a mobile phone.

There's a largely redundant space at the top of the screen that will be used to more clearly convey what's going on when I know which bits are most confusing.

It may be beneficial to watch some videos of pocket operators first to get an idea of what this would love to be.

How it works

https://padraig-operator.netlify.app/solo/melody/tutorial will hopefully explain some of it, it's quite buggy right now unfortunately.

As it was primarily designed with phones in mind, I designed everything with two point multitouch in mind. The solutions for desktop involve holding down the first value of a multitouch and then selecting the second after it turns blue.

The order in which buttons is pressed is important, but I'll hopefully resolve this later.

Buttons

Click actions:

MultiTouch/Hold actions:

Visuals explained

Most of this has been done primarily with the goal of just leaving the flexibility for clearer visuals later. The green/grey box at the top of the screen will be used to provide whatever data needs to be more clearly conveyed if I ever get around to figuring that out.

NOTE: I use hue-rotate to give the different devices different color schemes, so these colors are specifically for /solo/melody

Button backgrounds

Index buttons

Index button outlines

These serve largely just to keep track of where we're at in the current sequence

In composition mode when the active pattern is playing the red outlines will all sequentially fill up.

Views

Walkthrough

Not sure how useful this is, I'll do a video later

  1. Refresh page
  2. Click record button, this will open composition view, allowing you to edit the currently active pattern (default is the first pattern)
  3. Click any index, select a note when prompted, if you hold the note you can select how long it is played for
  4. Click sound button
  5. Select the bottom right sound option, this switches to drum mode
  6. click any index again, select a drum beat
  7. hit play, you should hear the beat looping (if not click the record button again and hit any note on the initial pad)
  8. click on patterns
  9. hold the first pattern, then select a second pattern to copy it
  10. add another sound to this pattern
  11. click on patterns again
  12. hold the patterns button, on desktop wait til it goes blue and then release
  13. (while still holding patterns on mobile) click the two patterns which you've edited, if on desktop now click the patterns button again

You should hear a sequence where it plays the two patterns you've created in the sequence you've chained them.

Weird Technical Stuff

UI

So the vast majority of what happens in this is dealt with via touch and click event on buttons which do specific actions onto the global state on the basis of that button's data attrbute values. As such, a large portion of the knowledge is contained within the HTML.

In a perhaps ill-advised move, the UI is heavily built upon on specific component which handles all actions in the UI. The key actions are:

System stuff

In terms of system there are two key parts

The code in this component is currently pretty messy to handle all the edge cases, I'll probably split out specific versions later for readabilities sake. There is a separate context within the Components directory which handles an alternative means for multi touch actions on desktop devices.

Credits

Promo stuff