shadcn.io is not affiliated with official shadcn/ui
Audio Converter Music Block for Solid
An audio converter for one typed 4:12 recording with source and target format selects, a bitrate slider that switches off for lossless targets, a sample-rate select, the estimated size and saving, and a Convert button that runs a short simulated progress.
Installation
Overview
Tell people what a conversion would cost before they run it, with this audio converter for Solid with Ark UI. It shows one Formfold source, a 4:12 recording named Slow Harbor (master), in a hairline frame with a plus mark on each corner, then the choices that decide its size: two Selects for the source and target format (WAV, FLAC, MP3, AAC, OGG), a bitrate Slider from 96 to 320 kbps that is off for WAV and FLAC and says why, and a Native Select for the sample rate. The estimated size, the saving against the source and one line of advice are worked out from those choices before anything runs. Convert is the only Shine Button: it fills a short progress bar and ends on "Done in this demo: no file was converted". It's built from Select, Native Select, Slider, Shine Button and Guides, with a CSS entrance only. For converters, exporters and any form where a choice has a cost.
FAQ
How is the size worked out?
WAV is the sample rate times 4 bytes (16-bit stereo) times the length, FLAC is 58% of that, and a lossy format is its bitrate in kilobits times 125 bytes times the length. A lossy source is assumed to have been made at its format's usual bitrate (MP3 320, AAC 256, OGG 256), and a lossless one at 44.1 kHz. The saving is the percentage difference between the target and the source, said as smaller or larger. Edit FORMAT_ITEMS and LENGTH for your files.
Why is the bitrate slider off?
WAV and FLAC are lossless, so they have no bitrate. The slider stays in place, disabled, and the line under it says so instead of the layout changing. The sample rate does the opposite: it changes the size of lossless files and is said to have no effect on lossy sizes here.
What are the advice lines?
They come from the combination: the same format on both sides asks for another target and keeps Convert from running, two lossy formats warn that quality is lost twice, and a bitrate above what a lossy source was made at warns that the file gets bigger, not better.
Does it convert anything, and what stays local?
No. Nothing is read, encoded or saved: the file is typed, the progress bar is a CSS animation of 1.5 seconds that ends the run, and under reduced motion the run completes at once. To make it real, send the file and these settings to your encoder in convert, drive the bar from its progress events and replace the final message with a download link.