Epic: Exact tempo & Tap Tempo

[dcallus]

• [x] Tap tempo is going to need an audio preview. Other things in the app are going to need previews too without interfering with the patternMaker. The best approach would be to try and create a parent class for PatternMaker called PatternMakerBase. Probably most features will be moved up to the parent class (with exception of things like countins and fills). PatternMaker class will have the singleton logic. PatternMakerBase class will allow multiple instances. The preview could be done in the base class, but probably best to make a new child class called TempoPreviewMaker.
• [x] #56

FOR NINAD

• [ ] Add a basic tap tempo button on section 1 (slider section). A temporary ugly button will do.
• [ ] Have a look at the following for inspiration: https://github.com/classicwfl/React-Metronome-With-Tap-Tempo/blob/master/src/Metronome.js and try here too https://github.com/Pickup-Music/metronome
• [ ] optional: See comments below for an example of a pro phone app using tap tempo
• [ ] Implement your own tap tempo and add it to the button. It should register a tempo after ~3 taps.
• [ ] Once a tap tempo has been established it should then play a preview sound (with the new tempoPreview class) which will have to be put into a new <ProMetronome> component reference.
• [ ] Allow updating of tempo as the preview sound is playing. So if you keep clicking/tapping during preview playback, the tempo will update (this does not necessarily need another three clicks, whatever feels most stable and intuitive)
• [ ] const MIN_TEMPO = 20; const MAX_TEMPO = 300; // put me in a new file in constants folder called tempoLimits.ts
• [ ] Make sure tap tempo does not exceed these values.
• [ ] Bonus: Write some tests, perhaps using a separate timer to simulate button presses and make sure the calculated tempo is correct (it probably doesn't need to be exact. Allow for a 2-3% leeway).

UI stuff for Dan

• [ ] Move the labels (from section 1) showing the current tempo to elsewhere so that they do not overlap when the minimum distance is taken off.
• [ ] Remove minimum distance between lower and upper tempo
• [ ] Add a toggle switch to toggle between 'tempo range' and 'exact tempo'.
• [ ] Implement tap tempo correctly into UI. Shift temporary button into a nice looking one in 'exact tempo mode'
• [ ] When exact tempo is on it says 'choose a tempo' instead of 'choose a tempo range'. Also update section 5 so that it now says 'your chosen tempo' with a stationary number instead of a randomised tempo - or simply remove step 5. See which looks better.
• [ ] Add logic so that when in 'tempo range' mode and the two tempos are on top of each other it will switch to 'exact tempo', i.e. one disappears and the toggle changes.
• [ ] Slider value should move accordingly
• [ ] Add visual feedback that the 3 clicks/taps have registered. A white flash of the screen or a lit up button etc.

Stretch goal 1. Try having two tap tempo buttons lowest tempo and highest tempo on tempo range mode. See if it looks okay or is too convoluted. Stretch goal 2. Have an audio preview of the tempo on slider drag. Stretch goal 3. Add Italian tempo names depending on the chosen tempo or tempo range. Stretch goal 4. Add currently chosen settings to local storage. Stretch goal 5: A dial knob on the metronome to adjust tempo during playback.

[dcallus]

The app is due a re-design from the ground-up, but it's probably best to get this feature up first as the redesign will take time.

So go with something like the following design for now which fits into the current design.

[dcallus]

@ninad-d - edit: okay. I updated the epic branch to contain a new base class above pattern (see #56 ). There is now also a new class called TempoPreview. You won't need this straight away, but eventually you will.

I've rewritten this issue to clean it up a bit so that your section is separate from the UI and I'll do the UI stuff. Let me know if you have any questions.

For an example of a good tap tempo see the free app: The Metronome by SoundBrenner (iOS and Android) install and click 'Player' on the bottom.