Égaliseur Audio Hors Ligne

Égaliseur Audio

Volume

Ambiance (Reverb)

Acoustique (Room Size)

Bass Boost

3D Surround

Son Binaural

body { background: #181c20; color: #f3f3f3; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; min-height: 100vh; } .container { max-width: 420px; margin: 40px auto; background: #23272b; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); padding: 32px 24px 24px 24px; } h1 { text-align: center; margin-bottom: 24px; font-size: 2rem; letter-spacing: 1px; } audio { width: 100%; margin-bottom: 24px; border-radius: 8px; background: #111; } .controls { display: flex; flex-direction: column; gap: 18px; } .control-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .control-group label { flex: 1 0 120px; font-size: 1rem; color: #b0b8c1; } .control-group input[type="range"] { flex: 2 1 180px; accent-color: #4fd1c5; height: 4px; border-radius: 4px; background: #333; } // Egaliseur Audio HTML5 - Fonctionne hors ligne // Par Jit // Elements DOM const audio = document.getElementById('audio'); const volume = document.getElementById('volume'); const ambiance = document.getElementById('ambiance'); const acoustic = document.getElementById('acoustic'); const bass = document.getElementById('bass'); const surround = document.getElementById('surround'); const binaural = document.getElementById('binaural'); // Web Audio API const ctx = new (window.AudioContext || window.webkitAudioContext)(); const source = ctx.createMediaElementSource(audio); // Contrôles const gainNode = ctx.createGain(); const bassEQ = ctx.createBiquadFilter(); bassEQ.type = 'lowshelf'; bassEQ.frequency.value = 120; // Reverb (Ambiance) - Simple Convolver avec impulse response synthétique function createImpulseResponse(duration = 2, decay = 2, reverse = false) { const rate = ctx.sampleRate; const length = rate * duration; const impulse = ctx.createBuffer(2, length, rate); for (let i = 0; i < 2; i++) { const channel = impulse.getChannelData(i); for (let j = 0; j < length; j++) { let n = reverse ? length - j : j; channel[j] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay); } } return impulse; } const convolver = ctx.createConvolver(); convolver.buffer = createImpulseResponse(2, 2); // Acoustique (Room Size) - Change la taille de l'impulse response function updateAcousticRoom(size) { // size: 0.1 (petite pièce) à 1 (grande salle) const duration = 0.5 + size * 3; // 0.5s à 3.5s const decay = 1 + size * 3; convolver.buffer = createImpulseResponse(duration, decay); } // 3D Surround - PannerNode const panner = ctx.createPanner(); panner.panningModel = 'HRTF'; panner.distanceModel = 'inverse'; panner.setPosition(0, 0, 0); // Son Binaural - Oscillation gauche/droite via StereoPannerNode const stereoPanner = ctx.createStereoPanner(); // Chaînage des nodes // source -> gain -> bassEQ -> convolver -> panner -> stereoPanner -> destination source .connect(gainNode) .connect(bassEQ) .connect(convolver) .connect(panner) .connect(stereoPanner) .connect(ctx.destination); // Volume volume.addEventListener('input', () => { gainNode.gain.value = parseFloat(volume.value); }); // Ambiance (Reverb) ambiance.addEventListener('input', () => { convolver.wet = parseFloat(ambiance.value); // On ajuste le mix dry/wet en modifiant le gain du convolver // Pour simplifier, on ajuste le gain du convolver et du dry if (!convolver.dryGain) { convolver.dryGain = ctx.createGain(); source.connect(convolver.dryGain).connect(ctx.destination); } convolver.dryGain.gain.value = 1 - convolver.wet; // Le convolver est déjà dans la chaîne, donc son volume = wet stereoPanner.gain ? stereoPanner.gain.value = convolver.wet : null; }); // Acoustique (Room Size) acoustic.addEventListener('input', () => { updateAcousticRoom(parseFloat(acoustic.value)); }); // Bass Boost bass.addEventListener('input', () => { bassEQ.gain.value = parseFloat(bass.value); }); // 3D Surround surround.addEventListener('input', () => { // -1 = gauche, 0 = centre, 1 = droite const val = parseFloat(surround.value); // On fait tourner la source autour de l'auditeur const angle = val * Math.PI * 2; const x = Math.sin(angle) * 2; const z = Math.cos(angle) * 2; panner.setPosition(x, 0, z); }); // Son Binaural binaural.addEventListener('input', () => { // Oscille entre -1 (gauche) et 1 (droite) stereoPanner.pan.value = parseFloat(binaural.value) * 2 - 1; }); // Initialisation gainNode.gain.value = parseFloat(volume.value); bassEQ.gain.value = parseFloat(bass.value); updateAcousticRoom(parseFloat(acoustic.value)); stereoPanner.pan.value = parseFloat(binaural.value) * 2 - 1; // Pour activer le contexte audio sur interaction utilisateur audio.addEventListener('play', () => { if (ctx.state === 'suspended') ctx.resume(); }); // Ajoutez ici un petit fichier audio MP3 pour tester l'égaliseur. // Placez un fichier nommé "sample.mp3" dans le même dossier que index.html. // (Vous pouvez utiliser n'importe quel court extrait audio libre de droits.)