This is the second one.
I prefer this one so far.
I no longer use a button but instead use a
transparent overlay that covers the ENTIRE PAGE.
Click anywhere to mute/unmute.
This one can mute and umnute but not change the web site's "volume graphic" (at least for my problematic sites).
Which basically "tricks" the website to not know that it is muted and prevents their "lock out" overlay from popping up if I mute for "too long".
// ==UserScript==
// @name - Add Mute/Unmute Replacement
// @version 1.0.1
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
// Create the button
const btn = document.createElement('muteunmutebutton');
//btn.textContent = '

'; // Start as unmuted icon
btn.textContent = '';
btn.style.position = 'fixed';
//btn.style.bottom = '20px';
//btn.style.right = '20px';
btn.style.bottom = '0px';
btn.style.right = '0px';
btn.style.height = '100vh';
btn.style.width = '100vw';
btn.style.zIndex = '99999';
//btn.style.padding = '10px';
//btn.style.fontSize = '20px';
//btn.style.borderRadius = '50%';
btn.style.borderRadius = '0';
btn.style.border = 'none';
//btn.style.background = '#333';
btn.style.background = 'transparent';
btn.style.color = '#fff';
//btn.style.cursor = 'pointer';
btn.style.cursor = 'default';
//btn.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
document.body.appendChild(btn);
let isMuted = false;
// Function to set mute state for all audio/video
function setMuteState(mute) {
const mediaElements = document.querySelectorAll('audio, video');
mediaElements.forEach(el => {
try {
el.muted = mute;
} catch (e) {
console.warn('Could not mute element:', e);
}
});
}
// Button click handler
btn.addEventListener('click', () => {
isMuted = !isMuted;
setMuteState(isMuted);
//btn.textContent = isMuted ? '

' : '

';
btn.textContent = isMuted ? '' : '';
});
// Optional: auto-detect new media elements added dynamically
const observer = new MutationObserver(() => {
setMuteState(isMuted);
});
observer.observe(document.body, { childList: true, subtree: true });
})();