D'accord, je peux vous aider à créer une base pour un égaliseur audio avec une interface graphique en utilisant les technologies web (HTML, CSS, JavaScript) et l'API Web Audio. Cela fonctionnera dans un navigateur web moderne sur Windows 10 et pourra être utilisé hors ligne une fois les fichiers enregistrés localement. Gardez à l'esprit que la création d'effets audio complexes comme le son 8D ou des réverbérations très réalistes uniquement avec l'API Web Audio standard peut être complexe. Cette version fournira les contrôles et une structure de base pour ces effets. Égaliseur Audio Web

Égaliseur Audio Web

Charger un fichier audio :

Fichier chargé : Aucun

Volume Général : 100%

Balance (Gauche/Droite) : 0

Égaliseur

60 Hz: 0 dB

170 Hz: 0 dB

310 Hz: 0 dB

600 Hz: 0 dB

1 kHz: 0 dB

3 kHz: 0 dB

6 kHz: 0 dB

12 kHz: 0 dB

14 kHz: 0 dB

16 kHz: 0 dB

Effets

Bass Boost : 0 dB

Reverb (Simple Delay) : 0%

Effet Spatial (Auto-Pan) : Vitesse: 0.5 Hz

(Plus d'effets comme Binaural, 3D, 8D nécessiteraient des implémentations plus avancées)

body { font-family: sans-serif; background-color: #f0f0f0; color: #333; display: flex; flex-direction: column; align-items: center; padding: 20px; margin: 0; } h1, h2 { color: #1a1a1a; text-align: center; } .controls-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 1000px; width: 95%; } .file-loader, .main-controls, .equalizer, .effects { border: 1px solid #ccc; padding: 15px; border-radius: 5px; background-color: #f9f9f9; min-width: 250px; } .file-loader { width: 100%; text-align: center; } .file-loader button { margin: 5px; padding: 8px 15px; cursor: pointer; } .file-loader button:disabled { cursor: not-allowed; opacity: 0.6; } .control-group, .eq-band { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 0.9em; } input[type="range"] { width: 100%; cursor: pointer; } input[type="checkbox"] { margin-right: 5px; vertical-align: middle; } .equalizer { display: flex; flex-direction: column; } .eq-band { border-bottom: 1px solid #eee; padding-bottom: 10px; } .eq-band:last-child { border-bottom: none; } span { font-weight: normal; color: #555; } #fileName { font-style: italic; color: #007bff; } // --- Éléments DOM --- const audioFileInput = document.getElementById('audioFile'); const playButton = document.getElementById('playButton'); const pauseButton = document.getElementById('pauseButton'); const fileNameDisplay = document.getElementById('fileName'); const volumeSlider = document.getElementById('volume'); const volumeValueDisplay = document.getElementById('volumeValue'); const panningSlider = document.getElementById('panning'); const panningValueDisplay = document.getElementById('panningValue'); const eqSliders = document.querySelectorAll('.eq-slider'); const eqFrequencies = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]; // Hz const bassBoostSlider = document.getElementById('bassBoost'); const bassBoostValueDisplay = document.getElementById('bassBoostValue'); const reverbSlider = document.getElementById('reverb'); const reverbValueDisplay = document.getElementById('reverbValue'); const spatialCheckbox = document.getElementById('spatial'); const spatialSpeedSlider = document.getElementById('spatialSpeed'); const spatialSpeedValueDisplay = document.getElementById('spatialSpeedValue'); // --- Web Audio API Setup --- let audioContext; let audioSource; let gainNode; let pannerNode; let eqNodes = []; let bassBoostNode; let delayNode; // For simple reverb let feedbackGainNode; // For simple reverb let spatialLFO; // Oscillator for auto-panning let spatialLfoGain; // Controls depth of auto-panning let audioBuffer; let isPlaying = false; let startTime = 0; let startOffset = 0; // To resume playback correctly function initAudioContext() { if (!audioContext) { audioContext = new (window.AudioContext || window.webkitAudioContext)(); setupAudioNodes(); } } function setupAudioNodes() { // Master Gain gainNode = audioContext.createGain(); gainNode.gain.value = volumeSlider.value; // Panner (Stereo) pannerNode = audioContext.createStereoPanner(); pannerNode.pan.value = panningSlider.value; // Bass Boost (Low Shelf Filter) bassBoostNode = audioContext.createBiquadFilter(); bassBoostNode.type = 'lowshelf'; bassBoostNode.frequency.value = 200; // Affect frequencies below 200 Hz bassBoostNode.gain.value = bassBoostSlider.value; // Equalizer Bands (Peaking Filters) eqNodes = eqFrequencies.map(freq => { const filter = audioContext.createBiquadFilter(); filter.type = 'peaking'; filter.frequency.value = freq; filter.Q.value = 1; // Quality factor filter.gain.value = 0; // Initial gain return filter; }); // Simple Reverb (Delay with Feedback) delayNode = audioContext.createDelay(1.0); // Max delay 1 second delayNode.delayTime.value = 0.3; // Initial delay time feedbackGainNode = audioContext.createGain(); feedbackGainNode.gain.value = reverbSlider.value * 0.6; // Feedback amount (scaled) // Spatial Effect (Auto-panner using LFO) spatialLFO = audioContext.createOscillator(); spatialLfoGain = audioContext.createGain(); spatialLFO.type = 'sine'; spatialLFO.frequency.value = spatialSpeedSlider.value; spatialLfoGain.gain.value = spatialCheckbox.checked ? 1 : 0; // Pan depth (0 or 1) spatialLFO.connect(spatialLfoGain); spatialLfoGain.connect(pannerNode.pan); // Modulate the pan parameter spatialLFO.start(); // --- Connect Nodes --- // Source -> EQ -> BassBoost -> Panner -> Gain -> Destination // ^-----------------------| (Reverb Send) // | Delay -> Feedback -> Gain // | ^---------| let lastNode = bassBoostNode; // Start connection after bass boost // Chain EQ filters eqNodes.forEach((eqNode, index) => { if (index === 0) { bassBoostNode.connect(eqNode); // Connect bass boost to first EQ } else { eqNodes[index - 1].connect(eqNode); // Connect previous EQ to current } lastNode = eqNode; // Update last node in EQ chain }); lastNode.connect(pannerNode); // Connect last EQ to panner pannerNode.connect(gainNode); // Panner to main gain // Reverb Send/Return Path (Parallel) pannerNode.connect(delayNode); // Send signal to delay delayNode.connect(feedbackGainNode); // Delay output to feedback gain feedbackGainNode.connect(delayNode); // Feedback loop feedbackGainNode.connect(gainNode); // Return reverb signal to main gain (wet signal) gainNode.connect(audioContext.destination); // Final output } function playSound() { if (!audioContext || !audioBuffer || isPlaying) return; initAudioContext(); // Ensure context is running (especially after user interaction) audioSource = audioContext.createBufferSource(); audioSource.buffer = audioBuffer; // Reconnect source to the processing chain audioSource.connect(bassBoostNode); // Connect source to the start of the chain // Calculate resume time const resumeTime = startOffset % audioBuffer.duration; audioSource.start(0, resumeTime); startTime = audioContext.currentTime - resumeTime; // Track start time for pause calculation isPlaying = true; playButton.disabled = true; pauseButton.disabled = false; audioSource.onended = () => { if (isPlaying) { // Only reset if it finished naturally, not paused isPlaying = false; startOffset = 0; // Reset offset when playback finishes playButton.disabled = false; pauseButton.disabled = true; } }; } function pauseSound() { if (!audioContext || !audioSource || !isPlaying) return; startOffset += audioContext.currentTime - startTime; // Calculate how far we played audioSource.stop(); audioSource.disconnect(); // Disconnect to allow garbage collection audioSource = null; isPlaying = false; playButton.disabled = false; pauseButton.disabled = true; } // --- Event Listeners --- // File Loading audioFileInput.addEventListener('change', (event) => { initAudioContext(); // Initialize context on first user interaction const file = event.target.files[0]; if (!file) return; fileNameDisplay.textContent = file.name; pauseSound(); // Stop previous sound if any startOffset = 0; // Reset offset for new file audioBuffer = null; // Clear previous buffer playButton.disabled = true; pauseButton.disabled = true; const reader = new FileReader(); reader.onload = (e) => { audioContext.decodeAudioData(e.target.result, (buffer) => { audioBuffer = buffer; playButton.disabled = false; // Enable play only after decoding console.log('Audio decoded successfully'); }, (error) => { console.error('Error decoding audio data:', error); fileNameDisplay.textContent = "Erreur de décodage"; }); }; reader.onerror = (e) => { console.error('FileReader error:', e); fileNameDisplay.textContent = "Erreur de lecture"; }; reader.readAsArrayBuffer(file); }); // Play/Pause Controls playButton.addEventListener('click', playSound); pauseButton.addEventListener('click', pauseSound); // Volume Control volumeSlider.addEventListener('input', (e) => { const value = parseFloat(e.target.value); if (gainNode) { gainNode.gain.setValueAtTime(value, audioContext.currentTime); } volumeValueDisplay.textContent = Math.round(value * 100); }); // Panning Control panningSlider.addEventListener('input', (e) => { const value = parseFloat(e.target.value); if (pannerNode) { pannerNode.pan.setValueAtTime(value, audioContext.currentTime); } panningValueDisplay.textContent = value.toFixed(2); }); // Equalizer Controls eqSliders.forEach((slider, index) => { slider.addEventListener('input', (e) => { const value = parseFloat(e.target.value); if (eqNodes[index]) { eqNodes[index].gain.setValueAtTime(value, audioContext.currentTime); } // Update corresponding value display const valueDisplay = document.getElementById(`band${eqFrequencies[index]}${eqFrequencies[index] >= 1000 ? 'k' : ''}Value`); if(valueDisplay) { valueDisplay.textContent = value.toFixed(1); } }); }); // Bass Boost Control bassBoostSlider.addEventListener('input', (e) => { const value = parseFloat(e.target.value); if (bassBoostNode) { bassBoostNode.gain.setValueAtTime(value, audioContext.currentTime); } bassBoostValueDisplay.textContent = value.toFixed(1); }); // Reverb Control reverbSlider.addEventListener('input', (e) => { const value = parseFloat(e.target.value); if (feedbackGainNode) { // Scale feedback gain - adjust 0.6 factor for desired max reverb feedbackGainNode.gain.setValueAtTime(value * 0.6, audioContext.currentTime); } reverbValueDisplay.textContent = Math.round(value * 100); }); // Spatial Effect Control spatialCheckbox.addEventListener('change', (e) => { const enabled = e.target.checked; if (spatialLfoGain) { spatialLfoGain.gain.setValueAtTime(enabled ? 1 : 0, audioContext.currentTime); } spatialSpeedSlider.disabled = !enabled; }); spatialSpeedSlider.addEventListener('input', (e) => { const value = parseFloat(e.target.value); if (spatialLFO) { spatialLFO.frequency.setValueAtTime(value, audioContext.currentTime); } spatialSpeedValueDisplay.textContent = value.toFixed(1); }); // Initial UI Update volumeValueDisplay.textContent = Math.round(volumeSlider.value * 100); panningValueDisplay.textContent = panningSlider.value; bassBoostValueDisplay.textContent = bassBoostSlider.value; reverbValueDisplay.textContent = Math.round(reverbSlider.value * 100); spatialSpeedValueDisplay.textContent = spatialSpeedSlider.value; eqSliders.forEach((slider, index) => { const valueDisplay = document.getElementById(`band${eqFrequencies[index]}${eqFrequencies[index] >= 1000 ? 'k' : ''}Value`); if(valueDisplay) { valueDisplay.textContent = slider.value; } }); Pour utiliser cet égaliseur : 1. Les fichiers (`index.html`, `style.css`, `script.js`) seront créés. 2. Ouvrez `index.html` dans votre navigateur (il fonctionnera hors ligne une fois les fichiers enregistrés sur votre ordinateur). 3. Cliquez sur "Charger un fichier audio" et sélectionnez un fichier MP3, WAV, OGG, etc. 4. Utilisez les boutons "Play" et "Pause" pour contrôler la lecture. 5. Ajustez les curseurs pour modifier le volume, la balance, les bandes de l'égaliseur et les effets. Notez que l'effet "Reverb" est une simulation très simple utilisant un delay avec feedback, et l'effet "Spatial" est un simple auto-panner. Des effets plus sophistiqués nécessiteraient des techniques de traitement du signal numérique (DSP) plus avancées ou des bibliothèques externes.