shadcn.io is not affiliated with official shadcn/ui
Crossfade Settings Music Block for React Aria
A crossfade panel with three fade curves as radio cards, an overlap slider from 0 to 12 seconds, two waveform strips that overlap by that length with both gain curves drawn between them, and a gapless-albums switch.
Installation
Overview
Show people what a crossfade does before they set it, with this crossfade panel for React with React Aria. It shows Blendstone, a music app for DJ-minded listeners, in a hairline frame split in two. At the start, three curves as radio cards (Equal power, Linear, S-curve), each with a small drawing of its two gains crossing, and a "Keep gaps inside albums" Switch. At the end, an Overlap Slider from 0 to 12 seconds (0 reads Off) above two waveform strips on a 30-second axis: Track A ends at 20 seconds and Track B starts that many seconds before it. Inside the overlap the bars shrink by the chosen curve, and the two gain curves are drawn between the strips from the same functions. A line says "Track B starts 6 s before A ends." The foot applies the changes in the page with a Shine Button and a Discard Button. On a phone the cards come first and the figure stacks under them. It's built from Slider, Switch, Button, Shine Button and Guides, with native radio buttons for the cards and a CSS entrance only. For players and DJ tools.
FAQ
How are the three curves defined?
Each is a function of the progress through the overlap, from 0 to 1. Equal power brings the new track in with a sine and the old one out with a cosine, so the two share the same energy and the loudness stays even. Linear is a straight line, so the gains cross at one half and the middle dips about 3 dB. The S-curve is a smoothstep, slow at both ends and quick in the middle. The small drawings in the cards, the big curves and the shrinking bars all come from the same helpers.
How do I use my own tracks and lengths?
The waveform strips are typed lists of amplitudes built at module scope, and A_ENDS and WINDOW set where Track A ends on the 30-second axis. Swap the lists for the end of your outgoing track and the start of the incoming one, and raise MAX_OVERLAP if you want a longer fade.
What does Keep gaps inside albums do?
Albums that are meant to play without a gap, such as live records and concept albums, should skip the fade. With the switch on, the line under it says so; off, the fade applies to every change of track. In your app, read the album's gapless flag before starting the overlap.
Is anything applied to the sound?
No. Apply keeps the choices in the page and says so in the status line; no audio plays in this demo. To make it real, save the curve and the overlap to the account, and ramp two gain nodes with the same functions when a track is about to end.