Проблемы с воспроизведением звука на веб-сайте на устройствах iOS. ⇐ Javascript

[Anonymous]

Я создал базовую веб-страницу с таймером обратного отсчета, который воспроизводит 3 коротких звука в разные моменты обратного отсчета. После завершения обратного отсчета появляется таймер секундомера, который ждет, пока пользователь нажмет кнопку «Стоп». br />Функция .play(), похоже, не работает на моем iPhone ни в Chrome, ни в Safari. Ни один из трех звуков не слышен вообще.
На настольных компьютерах он воспроизводится нормально, проблем вообще нет.
Есть ли решение этой проблемы? этот? Вся идея этого инструмента обучения заключается в том, что он должен работать на мобильных устройствах, чтобы участники могли тренировать свою реакцию дома.

< div class="snippet-code">

Код: Выделить всё

#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();

Подробнее здесь: https://stackoverflow.com/questions/793 ... os-devices