shadcn.io is not affiliated with official shadcn/ui
Vinyl Player Music Block for Svelte
A drawn turntable with a strobe ring and a tonearm that moves to the track you pick, a 33 1/3, 45 and 78 RPM speed control, a plus or minus 8% pitch fader, and readouts for running time, one turn and semitones.
Installation
Overview
Show how a record player really behaves, with this vinyl player for Svelte with Ark UI. It draws Platterly's turntable in a hairline frame with a plus mark on each corner: a platter with a ring of strobe dots at its rim, a record with grooves and track gaps, and a tonearm. Beside it are Side A's four tracks, a Segment Group for the speed (33 1/3, 45 or 78 RPM), a Slider for the pitch from minus 8% to plus 8%, and readouts worked out from them: the running time, how long one turn takes, the shift in semitones and whether the strobe ring is steady. Choosing a track turns the arm to that track's band. The Shine Button starts the platter's spin, whose turn time comes from the speed and the pitch, and the strobe ring drifts whenever the pitch is off. Nothing sounds, and under reduced motion nothing spins while the arm and the readouts still move. It's built from Segment Group, Slider, Shine Button, Button and Guides, with CSS motion only. For record players, DJ tools and any app that explains speed and pitch.
FAQ
How are the running time and the semitones worked out?
The block takes the speed you chose against the record's own 33 1/3 RPM, then the pitch on top: 45 RPM is 1.35 times as fast, and plus 8% multiplies that by 1.08. The side's running time is its total length divided by that ratio, the semitones are 12 times the base-2 logarithm of the ratio, and one turn takes 60 divided by the RPM including the pitch. At 45 RPM a 33 1/3 record plays 35% faster, so 18:40 becomes 13:50, 5.2 semitones higher. The sentence under the controls says the same in words and changes with every control.
What does the strobe ring do?
On a real turntable a ring of dots at the platter's rim looks still under a mains light when the speed is exactly right and drifts when it is not. Here the ring is still while the pitch is at zero and drifts forward or back when you move the fader, faster the further you go, and the Strobe ring readout says which. It stops with the platter when you press Pause.
How does the tonearm know where to go?
Each track sits in its own band of the record. The block works out, from the arm's length and pivot, the angle that puts the needle on each band's radius, and turns the arm to that angle when you choose the track. The tracks are a radio group, so the arrow keys move the arm too.
Does anything play, and what stays local?
No. The block says no audio plays in this demo: Play only starts the spin, and the track, speed and pitch live in the page and reset on a reload. To make it real, play the side through your own audio element and set its playback rate from the same ratio the block works out.