Loop Supreme, part 4: Adding a Scene

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!

Goal

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.

Implementation

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 Scene which can hold one or more Tracks!

Next time

• Adding “record” functionality to the Track component!!! 🙌🏻 So pumped for this, when this is working I think we’ll officially have a proof-of-concept.

Time log

• probably an hour and a half?