Probleme bei der Audiowiedergabe auf der Website auf iOS-Geräten ⇐ JavaScript

[Guest]

Ich habe eine einfache Webseite mit einem Countdown-Timer erstellt, der an verschiedenen Punkten des Countdowns drei kurze Töne abspielt. Sobald der Countdown abgeschlossen ist, erscheint ein Stoppuhr-Timer und wartet darauf, dass der Benutzer auf Stopp drückt.Die Funktion .play() scheint auf meinem iPhone sowohl für Chrome als auch für Safari nicht zu funktionieren. Keiner der drei Töne ist überhaupt hörbar.
Es funktioniert gut auf Desktops und es gibt überhaupt keine Probleme.
Gibt es eine Lösung dafür? Das? Die Grundidee des Trainingstools besteht darin, dass es auf Mobilgeräten funktionieren soll, sodass Teilnehmer ihre Reaktionszeiten zu Hause trainieren können.

< div class="snippet-code">

Code: Select all

#processed-content {
background-image: url('https://www.slslnc.org.au/wp-content/uploads/timerbackground.jpg');
background-position: center;
background-size: cover;
min-height: 96vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
text-align: center;
}

#processed-content h1,
#processed-content p {
color: black;
text-shadow: 0 0 15px white;
font-size: 2rem;
margin:50px 0;
}

p#timerDisplay.instructions {
font-size: 18px !important;
}

#processed-content button {
color: black;
font-size: 2rem;
margin:20px 0;
}
.start-button {
background-color:#ffd520;
border:2px solid black;
}
.stop-button {
background-color:#ed1c2e;
border:2px solid black;
}
.reset-button {
background-color:#00cc36;
border:2px solid black;
}
.save-button {
background-color:#0066db;
border:2px solid black;
}

.hidden {
display: none;
}

@media screen and (max-width:768px) {
p#timerDisplay.instructions {
font-size: 18px !important;
}
}



Beach Flags Reaction Time Trainer
START
When you press START, you will have up to 15 seconds to get into position and be ready for the audio prompts...
STOP
RESET
SAVE SCREENSHOT






const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const resetButton = document.getElementById("resetButton");
const screenshotButton = document.getElementById("screenshotButton");
const timerDisplay = document.getElementById("timerDisplay");

const readyAudio = document.getElementById("readyAudio");
const headsDownAudio = document.getElementById("headsDownAudio");
const whistleAudio = document.getElementById("whistleAudio");

let countdownTimeout, headsDownTimeout, whistleTimeout, stopwatchInterval;
let startTime;

startButton.addEventListener("click", function() {
startButton.classList.add("hidden");
timerDisplay.textContent = "Get ready...";

const randomCountdown = Math.floor(Math.random() * 6) + 10;

countdownTimeout = setTimeout(() => {
readyAudio.play();

const randomReadyTime = Math.floor(Math.random() * 2) + 3;

headsDownTimeout = setTimeout(() =>  {
headsDownAudio.play();

const randomWhistleTime = Math.floor(Math.random() * 3) + 2;

whistleTimeout = setTimeout(() => {
whistleAudio.play();
startStopwatch();
}, randomWhistleTime * 1000);
}, randomReadyTime * 1000);
}, randomCountdown * 1000);
});

function startStopwatch() {
startTime = Date.now();
stopButton.classList.remove("hidden");

stopwatchInterval = setInterval(() => {
const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2);
timerDisplay.textContent = `Time: ${elapsedTime} s`;
}, 10);
}

stopButton.addEventListener("click", function() {
clearInterval(stopwatchInterval);
stopButton.classList.add("hidden");
resetButton.classList.remove("hidden");
screenshotButton.classList.remove("hidden");
});

resetButton.addEventListener("click", function() {
clearTimeout(countdownTimeout);
clearTimeout(headsDownTimeout);
clearTimeout(whistleTimeout);
timerDisplay.textContent = "Get ready...";
resetButton.classList.add("hidden");
screenshotButton.classList.add("hidden");
startButton.classList.remove("hidden");
});

screenshotButton.addEventListener("click", function() {
html2canvas(document.querySelector("#processed-content")).then(canvas => {
const link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = 'reaction_time.png';
link.click();
});
});

function loadHtml2Canvas() {
const script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
document.body.appendChild(script);
}

loadHtml2Canvas();