ordinarthur/rebours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ordinarthur 2026-03-20 22:57:52 +01:00
parent 338efc548e
commit fc771aa2c1
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/scripts/main.js
View File

@ -605,7 +605,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 6. AMBIENT WORKSHOP SOUND (MP3) // 6. AMBIENT WORKSHOP SOUND (MP3)
// ========================================================== // ==========================================================
let soundOn = false; let soundOn = true;
// Create audio element (preloaded, looped, low volume) // Create audio element (preloaded, looped, low volume)
const ambientAudio = new Audio('/assets/atelier-ambiance.mp3'); const ambientAudio = new Audio('/assets/atelier-ambiance.mp3');
@ -616,8 +616,8 @@ document.addEventListener('DOMContentLoaded', () => {
const headerNav = document.querySelector('.header-nav'); const headerNav = document.querySelector('.header-nav');
if (headerNav) { if (headerNav) {
const soundBtn = document.createElement('button'); const soundBtn = document.createElement('button');
soundBtn.className = 'sound-toggle'; soundBtn.className = 'sound-toggle sound-active';
soundBtn.setAttribute('aria-label', 'Activer le son ambiant'); soundBtn.setAttribute('aria-label', 'Couper le son ambiant');
soundBtn.innerHTML = soundBtn.innerHTML =
'<span class="sound-bars">' + '<span class="sound-bars">' +
'<span class="sound-bar"></span>' + '<span class="sound-bar"></span>' +
@ -630,6 +630,20 @@ document.addEventListener('DOMContentLoaded', () => {
attachCursorHover([soundBtn]); 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 // Smooth volume fade using GSAP
function startAmbientSound() { function startAmbientSound() {
ambientAudio.play().then(() => { ambientAudio.play().then(() => {