shadcn.io is not affiliated with official shadcn/ui
Ringtone Creator Music Block for React
A ringtone maker with a track select, a 128-bar waveform, a fixed window of 15, 20 or 30 seconds slid by one start slider in one-second steps, fade in, fade out and loop switches drawn on the window, a format group and a derived file size.
Installation
Overview
Let people cut the part of a song they want to hear when the phone rings, with this ringtone creator for React with Base UI. A Ringlet Select picks one of four typed tracks and the waveform shows its 128 bars. A Toggle Group sets the length of the window (15, 20 or 30 seconds), one start Slider slides it in one-second steps with the arrow keys, and the bars inside it turn solid. Three Switches turn the loop marker, fade in and fade out on: the fades are drawn as ramps at the window's edges. A Segment Group picks AAC .m4r, MP3 or OGG and the size is worked out from the window and the bitrate, for example "About 469 KB at 128 kbps". Create ringtone is the only Shine Button and says it was saved in this demo and that no file was made. It's built from Select, Slider, Toggle Group, Switch, Segment Group, Shine Button and Guides, with a CSS entrance only. For ringtone makers, clip pickers and any fixed-length trimmer.
FAQ
How do I add my own tracks?
Edit TRACK_ITEMS: each has a label, an artist, a length in seconds and a seed that shapes its typed waveform. Replace WAVES with the real peaks of each file (128 numbers from 0 to 1) when you have them. The slider's range is the track's length minus the window, so a longer window leaves less room and the start is clamped.
How is the size worked out?
Seconds times the bitrate in kilobits times 125 bytes, shown in kilobytes: 30 seconds at 128 kbps is about 469 KB. AAC and MP3 use 128 kbps and OGG 112 kbps in this example; they are example figures, not what an encoder would write.
What do the fades and the loop marker do?
They are drawn on the window so you can see them: a ramp over the first or last three seconds covers the bars above a diagonal, and the loop marker is a dashed line where the tone would start over. The header sentence repeats the choices, such as "fades in, fades out".
Does it cut or save a file, and what stays local?
No. The status line says "Saved to Ringtones in this demo; no file was made". Nothing is decoded or encoded. To make it real, decode the file, slice the chosen seconds, apply the fades and encode to the chosen format in create, then hand the result to the phone's ringtone store.