The useful part is control, not wallpaper.
Lofi Cities puts animated city scenes beside browser-generated music. Its player waits for a press on Play. Music and city sounds have separate level controls. The page also has focus and sleep timers.[1]
Those controls do more than decorate the player. A listener can separate the sound bed from the scene, change the balance, and choose when the session ends.
Ambient sound should frame the work. It should never hold the controls hostage.
A user gesture is the right ignition key.
MDN says browsers may suspend a Web Audio context until a user interacts with the page. It recommends creating or resuming the context inside a user event.[2]
That browser rule matches the design rule. A visible Start button establishes intent. The same button must expose Stop without making the user search for another control.
Mixing needs names people can act on.
Web Audio connects sources, processing nodes, and a destination in an audio graph. A gain node changes level. Filters change the frequency content.[3]
The interface does not need to expose every node. It does need labels that describe the audible result. "Level" tells the listener how loud the bed will be. "Texture" explains that the slider changes brightness or weight, depending on the selected source.
A timer is a stop condition.
A focus timer should not imply that sound improves productivity. It gives the session a boundary. The audio stops when the timer reaches zero. The listener can stop it sooner with one action.
The patch bay below generates noise and a low fan tone in the browser. It does not load a track, save a preference, use the microphone, or send audio data anywhere.