Mute Toggle
A copy-paste audio & waveforms component in pure HTML, CSS & vanilla JS. Zero dependencies, framework-agnostic, MIT-licensed.
Audio & WaveformsHTMLJavaScriptCSSany framework
Copy into your project
HTML
<button class="nuda-mute" aria-label="Mute">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 5L6 9H2v6h4l5 4V5z" />
<path class="nuda-mute__wave1" d="M15.54 8.46a5 5 0 010 7.07" />
<path class="nuda-mute__wave2" d="M19.07 4.93a10 10 0 010 14.14" />
<path class="nuda-mute__slash" d="M3 3l18 18" />
</svg>
</button>JavaScript
const btn = document.querySelector('.nuda-mute');
btn.addEventListener('click', () => {
const muted = btn.classList.toggle('is-muted');
btn.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
});CSS
.nuda-mute__slash {
stroke-dasharray: 32;
stroke-dashoffset: 32;
color: #ff5e7a;
transition: stroke-dashoffset 0.35s ease;
}
.nuda-mute.is-muted .nuda-mute__slash {
stroke-dashoffset: 0;
}
.nuda-mute__wave1,
.nuda-mute__wave2 {
transition:
opacity 0.25s,
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: 11px 12px;
}
.nuda-mute.is-muted .nuda-mute__wave1,
.nuda-mute.is-muted .nuda-mute__wave2 {
opacity: 0;
transform: scale(0.4);
}How to use Mute Toggle
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.