feat: Enable ambient sound by default with autoplay on user interaction and update UI to reflect its active state.

This commit is contained in:
ordinarthur 2026-03-20 22:57:52 +01:00
parent 338efc548e
commit fc771aa2c1

View File

@ -605,7 +605,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 6. AMBIENT WORKSHOP SOUND (MP3)
// ==========================================================
let soundOn = false;
let soundOn = true;
// Create audio element (preloaded, looped, low volume)
const ambientAudio = new Audio('/assets/atelier-ambiance.mp3');
@ -616,8 +616,8 @@ document.addEventListener('DOMContentLoaded', () => {
const headerNav = document.querySelector('.header-nav');
if (headerNav) {
const soundBtn = document.createElement('button');
soundBtn.className = 'sound-toggle';
soundBtn.setAttribute('aria-label', 'Activer le son ambiant');
soundBtn.className = 'sound-toggle sound-active';
soundBtn.setAttribute('aria-label', 'Couper le son ambiant');
soundBtn.innerHTML =
'<span class="sound-bars">' +
'<span class="sound-bar"></span>' +
@ -630,6 +630,20 @@ document.addEventListener('DOMContentLoaded', () => {
attachCursorHover([soundBtn]);
}
// Autoplay on first user interaction (browsers require it)
let autoStarted = false;
function autoStartSound() {
if (autoStarted || !soundOn) return;
autoStarted = true;
startAmbientSound();
window.removeEventListener('click', autoStartSound);
window.removeEventListener('scroll', autoStartSound);
window.removeEventListener('mousemove', autoStartSound);
}
window.addEventListener('click', autoStartSound, { once: false });
window.addEventListener('scroll', autoStartSound, { once: false });
window.addEventListener('mousemove', autoStartSound, { once: false });
// Smooth volume fade using GSAP
function startAmbientSound() {
ambientAudio.play().then(() => {