ChatGPT created code (buggy) to dimm the background brightness in dependence of sound level

index.html

    <script>
		const threshold = 2; // Schwellenwert für die Lautstärke
		const maxBrightness = 100; // Maximaler Helligkeitswert in Prozent
		let currentBrightness = 100; // Anfangswert für die Helligkeit
		const fadeDuration = 1000; // Wert zur Steuerung der Geschwindigkeit des Fadings
		const dimFactor = 0.05; // Wert zur Steuerung der Helligkeitsanpassungsgeschwindigkeit

		// Funktion zum Dimmen der Helligkeit und Festlegen des Hintergrunds
		function dimBrightness() {
		  const initialBrightness = document.body.style.getPropertyValue('--brightness');
		  let brightness = initialBrightness;
		  const step = initialBrightness / fadeDuration * 10; // Wert zur Steuerung der Schrittweite des Fadings
		  const interval = setInterval(() => {
			brightness -= step;
			brightness = Math.max(Math.min(brightness, 1), 0);
			document.body.style.setProperty('--brightness', brightness);
			if (brightness <= 0) {
			  clearInterval(interval);
			  document.body.style.backgroundColor = '#000';
			  document.body.style.color = '#fff';
			}
		  }, 10);
		}


		// Funktion zum Erhöhen der Helligkeit und Festlegen des Hintergrunds
		function increaseBrightness() {
		  const initialBrightness = document.body.style.getPropertyValue('--brightness');
		  let brightness = initialBrightness;
		  const step = (1 - initialBrightness) / fadeDuration * 10; // Wert zur Steuerung der Schrittweite des Fadings
		  const interval = setInterval(() => {
			brightness += step;
			brightness = Math.max(Math.min(brightness, 1), 0);
			document.body.style.setProperty('--brightness', brightness);
			if (brightness >= 1) {
			  clearInterval(interval);
			  document.body.style.backgroundColor = '#fff';
			  document.body.style.color = '#000';
			}
		  }, 10);
		}


	// Funktion zum Überprüfen der Umgebungslautstärke
	function checkVolume() {
	  navigator.mediaDevices.getUserMedia({ audio: true }) // Zugriff auf das Mikrofon des Geräts
		.then(stream => {
		  const audioContext = new AudioContext();
		  const source = audioContext.createMediaStreamSource(stream);
		  const analyser = audioContext.createAnalyser();
		  analyser.fftSize = 32;
		  source.connect(analyser);

		  const bufferLength = analyser.frequencyBinCount;
		  const dataArray = new Float32Array(bufferLength);
		  const historyLength = 20; // Anzahl der letzten Lautstärkewerte, die gemittelt werden sollen
		  const history = new Array(historyLength).fill(0);
		  let average = 0;

		  function update() {
			requestAnimationFrame(update);
			analyser.getFloatFrequencyData(dataArray);
			const current = dataArray.reduce((acc, val) => acc + val) / bufferLength; // Aktuelle Lautstärke berechnen
			history.push(current);
			history.shift();
			average = history.reduce((acc, val) => acc + val) / historyLength; // Durchschnittliche Lautstärke berechnen
			const delta = Math.abs(current - average); // Differenz zur Durchschnittslautstärke berechnen
			if (delta > threshold) {
			  increaseBrightness();
			} else {
			  dimBrightness();
			}
		  }

		  // Verzögern der Überprüfung der Umgebungslautstärke auf alle 5 Sekunden
		  let lastUpdate = 0;
		  function throttledUpdate() {
			const now = Date.now();
			if (now - lastUpdate > 1000) { // Nur alle 5 Sekunden aktualisieren
			  update();
			  lastUpdate = now;
			}
			requestAnimationFrame(throttledUpdate);
		  }
		  throttledUpdate();
		})
		.catch(error => console.error(error));
	}


      // Funktion zum Initialisieren der Helligkeit
	function initBrightness() {
	  document.body.style.setProperty('--brightness', 1); // Standardwert für Helligkeit setzen
	  document.body.style.backgroundColor = '#fff'; // Hintergrundfarbe auf Weiß setzen
	  document.body.style.color = '#000'; // Textfarbe auf Schwarz setzen
	  const brightness = document.body.style.getPropertyValue('--brightness');
	  currentBrightness = parseFloat(brightness) * maxBrightness;
	}

      // Seite initialisieren
      initBrightness();
      checkVolume();
    </script>

    <style>
      body {
        --brightness: 1;
        filter: brightness(var(--brightness));
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        font-size: 1.2rem;
        line-height: 1.6;
      }
    </style>

    <div id="brightness">Helligkeit: 100%</div>

    <script>
      // Helligkeitselement auswählen und aktualisieren
      const brightnessElement = document.getElementById('brightness');
      function updateBrightness() {
        brightnessElement.innerText = `Helligkeit: ${currentBrightness}%`;
      }
      setInterval(updateBrightness, 1000); // Helligkeitswert alle 1 Sekunde aktualisieren
    </script>