Sound toggle

Sound is off until a visitor turns it on (D-H4). The toggle only sets the preference; the sound engine obeys it and opens its audio context inside that same click. Quiet stays silent, Studio plays a little softer.

Example#

Usage#

Use the sound toggle wherever the site can make sound. Sound is off until a visitor turns it on (D-H4); the toggle sets the preference, and the sound engine plays only while it is on.

• icon (default) is an icon key with the sound-on and sound-off glyphs; labelled says the state in words, "Sound off" or "Sound on", for the visitor controls.
• No audio until asked. The engine opens its audio context inside the click that turns sound on, so nothing loads before.

Anatomy#

Volume#

Reading layer: identical at every volume. Sound is never tied to the volume: Rave stays silent until a visitor asks.

• Quiet

  Sound off

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Sound off

  The site default. Art on its own plates, one display moment per view.

• Press

  Sound off

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Sound off

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• The words are "Sound off" and "Sound on"; the key's name says the current state.

Do and don't#

Accessibility#

• A real button with aria-pressed: pressed means sound is on. The icon key's name and the labelled key's words say the state, "Sound off" or "Sound on", and the speaker glyph follows.
• The choice persists (localStorage mk-sound) and PrefsScript sets <html data-mk-sound> before the first paint.
• Nothing plays before a visitor asks for it, and reduced motion does not mute it: sound is not motion.

Props#

Tokens#

Changelog#