Mute switch

A button that mutes and unmutes every sound on the page, in memory only, so a reload starts fresh.

sound
mute
sound
settings
toggle
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Mute switch example

Press the button in the demo to hear it.

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div class="demo-row"><button class="demo-btn" type="button" data-sound="mute-switch" aria-pressed="false">Mute sounds</button> <button class="demo-btn" type="button" data-sound="tap-round">Try a sound</button></div>

import { MuteSwitch } from "./motion/react/MuteSwitch";

<MuteSwitch>Play</MuteSwitch>

<script setup lang="ts">
import MuteSwitch from "./motion/vue/MuteSwitch.vue";
</script>

<template>
  <MuteSwitch>Play</MuteSwitch>
</template>

const button = document.querySelector("button");
button.dataset.sound = "mute-switch";

The wrappers: MuteSwitch.tsx (React, TypeScript) and MuteSwitch.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

None: it works as it is.

A real <button> with aria-pressed: Space and Enter work, focus shows, and the label stays the same while the state changes. Muting stops sounds that are still ringing within a few milliseconds.

Size

mute-switch.js is 0.2 KB gzip, with sounds-kit.js 3.7 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.