From abfa6f4b8d77a1804d4c9c82f761dc55dfaa10b4 Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Wed, 17 Sep 2025 11:24:15 +0200 Subject: [PATCH] =?UTF-8?q?=C3=84nderung:=20Verbesserung=20der=20Audio-Int?= =?UTF-8?q?egration=20und=20Anpassung=20der=20Ger=C3=A4uschparameter=20im?= =?UTF-8?q?=20Taxi-Spiel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Änderungen: - Implementierung der Autoplay-Policy zur sofortigen Wiederaufnahme des AudioContext bei Benutzerinteraktionen. - Anpassung der Motorgeräuschparameter basierend auf der Geschwindigkeit des Taxis für eine realistischere Klangdarstellung. - Sicherstellung, dass der AudioContext aktiv ist, bevor Motorgeräusche gestartet werden. - Entfernung der Passagier- und Zielgenerierung sowie deren Zeichnung, um den Fokus auf die Audio-Integration zu legen. Diese Anpassungen verbessern die akustische Benutzererfahrung und optimieren die Audioverwaltung im Taxi-Minispiel. --- frontend/src/views/minigames/TaxiGame.vue | 93 +++++++++++++---------- 1 file changed, 52 insertions(+), 41 deletions(-) diff --git a/frontend/src/views/minigames/TaxiGame.vue b/frontend/src/views/minigames/TaxiGame.vue index 1c9002a..6363178 100644 --- a/frontend/src/views/minigames/TaxiGame.vue +++ b/frontend/src/views/minigames/TaxiGame.vue @@ -318,10 +318,25 @@ export default { try { this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); + // Autoplay-Policy: Context sofort im User-Gesture fortsetzen + if (this.audioContext.state === 'suspended') { + await this.audioContext.resume(); + } const generator = new NoiseGenerator(); this.motorSound = new MotorSound(this.audioContext, generator); await this.motorSound.init(); console.log('MotorSound initialisiert'); + // Falls bereits Bewegung anliegt, Sound direkt starten + const speedKmh = this.taxi.speed * 5; + if (speedKmh > 0) { + this.motorSound.start(); + // Sofort Parameter setzen + const speedFactor = Math.min(speedKmh / 120, 1); + const motorSpeed = 0.3 + (speedFactor * 0.3); + const volume = 0.1 + (speedFactor * 0.4); + this.motorSound.setSpeed(motorSpeed); + this.motorSound.setVolume(volume); + } } catch (error) { console.warn('MotorSound konnte nicht initialisiert werden:', error); } @@ -333,6 +348,11 @@ export default { const speedKmh = this.taxi.speed * 5; // Geschwindigkeit in km/h const isMoving = speedKmh > 0; + // Sicherstellen, dass der AudioContext läuft + if (this.audioContext && this.audioContext.state === 'suspended') { + this.audioContext.resume().catch(() => {}); + } + if (isMoving && !this.motorSound.isPlaying) { this.motorSound.start(); } else if (!isMoving && this.motorSound.isPlaying) { @@ -342,7 +362,7 @@ export default { if (isMoving) { // Geschwindigkeitsabhängige Tonhöhe und Lautstärke const speedFactor = Math.min(speedKmh / 120, 1); // 0-1 basierend auf 0-120 km/h - const motorSpeed = 0.3 + (speedFactor * 0.25); // 0.3 bis 1.5 + const motorSpeed = 0.3 + (speedFactor * 0.3); // 0.3 bis 1.5 const volume = 0.1 + (speedFactor * 0.4); // 0.1 bis 0.5 this.motorSound.setSpeed(motorSpeed); @@ -369,29 +389,7 @@ export default { this.destinations = []; this.obstacles = []; - // Generiere Passagiere (auf Straßen) - for (let i = 0; i < 3; i++) { - const position = this.getRandomRoadPosition(); - this.passengers.push({ - x: position.x, - y: position.y, - width: 15, - height: 15, - pickedUp: false - }); - } - - // Generiere Ziele (auf Straßen) - for (let i = 0; i < 3; i++) { - const position = this.getRandomRoadPosition(); - this.destinations.push({ - x: position.x, - y: position.y, - width: 15, - height: 15, - completed: false - }); - } + // Passagiere/Ziele werden aktuell nicht generiert // Generiere Hindernisse (außerhalb der Straßen) @@ -890,21 +888,7 @@ export default { this.ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height); }); - // Zeichne Passagiere - this.passengers.forEach(passenger => { - if (!passenger.pickedUp) { - this.ctx.fillStyle = '#4CAF50'; - this.ctx.fillRect(passenger.x, passenger.y, passenger.width, passenger.height); - } - }); - - // Zeichne Ziele - this.destinations.forEach(destination => { - if (!destination.completed) { - this.ctx.fillStyle = '#F44336'; - this.ctx.fillRect(destination.x, destination.y, destination.width, destination.height); - } - }); + // Passagiere/Ziele werden aktuell nicht gezeichnet // Zeichne Taxi @@ -996,8 +980,22 @@ export default { return 'horizontal'; // Fallback }, - handleCanvasClick(event) { - // Canvas-Klick-Handling falls benötigt + async handleCanvasClick(event) { + // AudioContext bei erster Benutzerinteraktion initialisieren + await this.initAudioOnUserInteraction(); + if (this.audioContext && this.audioContext.state === 'suspended') { + await this.audioContext.resume().catch(() => {}); + } + // Motor ggf. direkt starten + if (this.motorSound && !this.motorSound.isPlaying) { + this.motorSound.start(); + const speedKmh = this.taxi.speed * 5; + const speedFactor = Math.min(speedKmh / 120, 1); + const motorSpeed = 0.3 + (speedFactor * 0.3); + const volume = 0.1 + (speedFactor * 0.4); + this.motorSound.setSpeed(motorSpeed); + this.motorSound.setVolume(volume); + } }, async handleKeyDown(event) { @@ -1005,6 +1003,19 @@ export default { // AudioContext bei erster Benutzerinteraktion initialisieren await this.initAudioOnUserInteraction(); + if (this.audioContext && this.audioContext.state === 'suspended') { + await this.audioContext.resume().catch(() => {}); + } + // Motor ggf. direkt starten + if (this.motorSound && !this.motorSound.isPlaying) { + this.motorSound.start(); + const speedKmh = this.taxi.speed * 5; + const speedFactor = Math.min(speedKmh / 120, 1); + const motorSpeed = 0.3 + (speedFactor * 0.3); + const volume = 0.1 + (speedFactor * 0.4); + this.motorSound.setSpeed(motorSpeed); + this.motorSound.setVolume(volume); + } event.preventDefault(); },