Sound Toggle Notification Block for React

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 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.

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.

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.

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.

The slider takes the width of the panel with the meter under it, and each row keeps its name and switch on one line with the tone select and Play button under them. A row whose sound is off keeps its place with the select disabled, so nothing moves.