shadcn.io is not affiliated with official shadcn/ui
Audio Settings Music Block for React
A streaming settings panel with a quality choice for Wi-Fi and for mobile data, the data an hour worked out from each bitrate, an hours-a-week slider that turns it into gigabytes a month, a device choice, a balance slider and three switches.
Installation
Overview
Let listeners trade sound quality against data, with these audio settings for React with Base UI. It shows Tonehaven, a hi-fi streaming app, in a hairline frame with a plus mark on each corner. A first band holds two groups of four bitrates, Low at 96 kbps up to Lossless at about 900, one for Wi-Fi and one for mobile data, each row showing the data an hour it costs, worked out from the bitrate. An hours-a-week Slider turns the mobile choice into gigabytes a month. An Output band has a device choice (headphones, speaker, car) and a balance Slider with a Centre button, and a last band has three Switches: loudness normalisation, spatial audio and mono audio. Spatial audio is switched off with its reason in words unless the device is headphones. The foot counts unsaved changes and holds a Shine Button to save them and a Button to discard them. On a phone the two bitrate groups stack. It's built from Slider, Switch, Button, Shine Button and Guides, with native radio buttons for the choices and a CSS entrance only. For music, podcast and video apps with a quality setting.
FAQ
How do I use my own bitrates?
Edit QUALITIES. Each has an id, a label and its bitrate in kilobits a second. The data an hour is worked out from the bitrate (kbps times 3,600 seconds, divided by 8 bits and 1,000), so changing a bitrate changes the row, and the monthly figure under the slider follows from the hours a week you choose and the quality picked for mobile data. The figures are examples, not a promise from any service.
How is the monthly figure worked out?
It takes the hours a week on mobile data, multiplies by 52 weeks and divides by 12 months, then by the megabytes an hour of the quality chosen for mobile data. Hours go from 1 to 40, and the sentence under the slider says the result in gigabytes, for example "12 h a week on Normal: 3.7 GB on mobile data a month." Moving the slider or changing the mobile choice updates it.
Why is spatial audio switched off?
Spatial audio only makes sense on headphones, so choosing Speaker or Car turns it off, disables the switch and shows the reason under it. The reason line keeps its space when it is hidden, so nothing moves. Choosing Headphones again lets you switch it on.
What stays local, and how do I make it real?
Everything. Save keeps the settings in the page's state and says so in the status line; nothing is sent and nothing changes how any sound plays. To make it real, send the saved object to your account API from the form's submit handler, apply it to the player, and show an error in the status line if the request fails. The tone controls (bass, mid, treble) live in the equaliser block.
How do I use it from the keyboard?
The bitrate groups and the device choice are native radio buttons: Tab to a group, move with the arrow keys and the choice follows. The sliders take the arrow keys, Home and End. Save and Discard stay in the page and answer when nothing has changed ("No changes to save."). The balance reads "L 20%" or "R 20%" and its slider speaks the same in words.