<audio id=”myAudio” src=”https://woodburyrtc.org/wp-content/uploads/2026/02/Lopkerjo-We-the-People.mp3” loop></audio>

<button id=”muteToggle” class=”audio-fab” aria-label=”Toggle Background Music”>
<span id=”muteIcon”>
<svg width=”24″ height=”24″ 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><line x1=”23″ y1=”9″ x2=”17″ y2=”15″></line><line x1=”17″ y1=”9″ x2=”23″ y2=”15″></line></svg>
</span>
</button>

<style>
.audio-fab {
position: fixed;
bottom: 5px;
right: 5px;
z-index: 9999;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #1a1a1a;
color: #ffffff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.audio-fab:hover {
transform: scale(1.1);
background-color: #333;
}

.audio-fab svg {
width: 26px;
height: 26px;
}
</style>

<script>
(function() {
const audio = document.getElementById(‘myAudio’);
const btn = document.getElementById(‘muteToggle’);
const iconContainer = document.getElementById(‘muteIcon’);

const FADE_DURATION = 3000; // Time in milliseconds (3 seconds)
const iconPlaying = `<svg width=”24″ height=”24″ 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><path d=”M19.07 4.93a10 10 0 0 1 0 14.14″></path><path d=”M15.54 8.46a5 5 0 0 1 0 7.07″></path></svg>`;
const iconPaused = `<svg width=”24″ height=”24″ 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><line x1=”23″ y1=”9″ x2=”17″ y2=”15″></line><line x1=”17″ y1=”9″ x2=”23″ y2=”15″></line></svg>`;

const fadeIn = (element, duration) => {
element.volume = 0;
const step = 0.05; // Amount to increase volume each interval
const intervalTime = duration * step;

const fadeInterval = setInterval(() => {
if (element.volume < 1 – step) {
element.volume += step;
} else {
element.volume = 1;
clearInterval(fadeInterval);
}
}, intervalTime);
};

const handleFirstInteraction = () => {
audio.play().then(() => {
iconContainer.innerHTML = iconPlaying;
fadeIn(audio, FADE_DURATION);
}).catch(err => console.log(“Waiting for interaction…”));

window.removeEventListener(‘click’, handleFirstInteraction);
window.removeEventListener(‘touchstart’, handleFirstInteraction);
};

window.addEventListener(‘click’, handleFirstInteraction);
window.addEventListener(‘touchstart’, handleFirstInteraction);

btn.addEventListener(‘click’, (e) => {
e.stopPropagation();
if (audio.paused) {
audio.volume = 1; // Direct play after manual toggle
audio.play();
iconContainer.innerHTML = iconPlaying;
} else {
audio.pause();
iconContainer.innerHTML = iconPaused;
}
});
})();
</script>