This is part 4 in a series:
- Part 12: v1.0 release, and project retro
- Part 11: Exporting stems and changing inputs
- Part 10: Keyboard bindings
- Part 9: Visualizing the waveform
- Part 8: Building and hosting
- Part 7: Latency and adding Track functionality
- Part 6: Workers and AudioWorklets
- Part 5: Record and loop a track
- Part 4: Adding a Scene
- Part 3: Metronome click
- Part 2: Adding a Metronome
- Part 1: New project: building a web-based audio looper!
Add a basic
Scene component, which should be a container for all the
Tracks in the loop. A
Scene should be able to add
Tracks, and the
Track component should be able to delete itself from the
Scene track list.
This was a pretty boring task, mostly some simple React components. I refactored the “Container” styles into a new component so the Metronome and Scene would look the same. I’m not totally sure I’ll keep this styling but for quick iteration I wanted it to be visually consistent.
The only thing that held me up on this task was forgetting to put the
key prop in the right place 🤦🏻. Initially, I added it to the top-level
div in the
Track component, rather than on the actual
Track component rendered in the
Scene. This caused the “remove” functionality to break and I was scratching my head until I realized my silly mistake.
Status of app
- Merged PR https://github.com/ericyd/loop-supreme/pull/5
- Refactored some styling into a wrapper component
- The app now has a
Scenewhich can hold one or more
- Adding “record” functionality to the
Trackcomponent!!! 🙌🏻 So pumped for this, when this is working I think we’ll officially have a proof-of-concept.
- probably an hour and a half?