Loop Supreme, part 4: Adding a Scene

Heads up! I've decided to self-manage my blog. I'm leaving this post live as to not "break the internet" but feel free check out the post on my new blog here! blog.ericyd.com/loop-supreme-part-4-adding-..

---

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 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?