Interactive Song Mixer – D’Angelo’s “Lady”

I built a web-based mixer for a track-separated version of “Lady” by D’Angelo. Uses p5.js for UI and Tone.js for audio.

Link: https://editor.p5js.org/noahblack/full/U_07zGPAA

Signal Chain

Audio Files → Track Volumes → Master Volume → CrossFade (Dry/Chebyshev) → Reverb → Output

Four tracks: Bass, Drums, Chords, Vocals. The Chords track combines Other.mp3 and Piano.mp3 since the track splitter didn’t distinguish between the pad synth and piano properly.

Implementation Notes

Each track gets a Tone.js Player and Volume node. The Chords track uses two players synchronized to the same playback position.

Effects are applied post-master volume. Chebyshev distortion uses a CrossFade node to blend dry and wet signals – input ‘a’ gets the clean signal, input ‘b’ gets the distorted signal. The fade parameter (0-1) controls the mix.

Reverb comes last in the chain with its own wet/dry control.

Playback Control

Scrubbing works by tracking elapsed time with millis() and seeking all players to the new position:

javascript

playbackOffset = newPosition;
playbackStartTime = millis();
player.start(0, newPosition);

The scrubber UI updates every frame unless the user is actively dragging it.