shadcn.io is not affiliated with official shadcn/ui
Sound Toggle Notification Block for Svelte
A meeting app's sound settings: a master switch, a volume slider with a level meter, a switch and a tone for each kind of notification, and a Play button that makes a real short tone in your browser when pressed.
Installation
Overview
Let people choose how an app sounds, and hear it before they decide, with these notification sound settings for Svelte with Ark UI. A narrow panel under a compact header with one Switch for all sounds. The first band holds a Slider for the volume with its percentage and a level meter of twelve bars; under it, one row for each kind of notification (messages, someone joins, raised hands, a meeting starting), each with its own switch, a Native Select of tones (Chime, Pluck, Soft ping, Silent) and a Play Button. Play makes a real tone with the browser's Web Audio oscillator, only when it is pressed, scaled by the slider, and the line at the foot says what was played ("Played Pluck at 60%") or why nothing was ("Sounds are off"). The meter sweeps once per tone and stays still under reduced motion. It's built from Switch, Slider, Native Select, Button and Guides, with CSS motion only. For a notification settings page, a meeting or chat app, or any product that plays alert sounds.
FAQ
How is the tone made, and when does it play?
With the Web Audio API: the Play button creates an audio context, one or two oscillators with a short volume envelope, and closes the context when the last note has finished. A tone lasts under half a second and plays once; no file is loaded. Nothing plays when the page loads, when you move the slider or when you change a tone: only a press of Play. The loudness is the slider squared times a fixed ceiling, so low settings stay gentle and the top setting is never loud.
When does Play stay quiet?
When the master switch is off, when the row's own switch is off, when its tone is Silent and when the volume is 0. The status line says which in words, so the button never seems broken. If a browser can't play sound from a page the line says that instead.
What does reduced motion change?
Only the picture. The meter's bars fade up in turn each time a tone plays, and under reduced motion they stay still; the sound is exactly the same, since a tone is not motion. The meter itself only shows the volume, so nothing depends on seeing it sweep.
What stays local, and how do I make it real?
The switches, tones and volume live in the page and are stored nowhere; the tones are made on the spot, not played from your files. In your app, save the settings with the account and read them when a notification arrives, then play your own sound file (an Audio element, or a sound in the push payload) for the chosen tone. Browsers allow a page to play sound only after the person has interacted with it, which a press of Play always is.
Is it accessible?
Every control is named: the switches ("Sound for Messages"), the tone selects ("Tone for Messages") and Play buttons that name the tone and the kind ("Play Pluck for Messages"). The slider has a label and speaks its value in percent. The status line is a polite live region, and a repeated message is announced again each time you press. Nothing relies on hearing: the line says what was played.