Здравствуйте, JS-интеллектуалы!
Вот придумал себе очередное учебное задание по мотивам прошлых тем
, которое частично решилось, а вот дальше необходима помощь
.
Суть проблемы в следующем: по клику на кнопку в случайном порядке последовательно воспроизводится определённое количество аудио из массива (в данном случае три, но почему-то они могут повторяться, что нежелательно). Затем в текстовой форме должны вывестись числа, которые прозвучали в аудио, по которым следует пройтись кликами в точном порядке воспроизведения аудио до alert OK!
P.S. Понимаю, что задача не из простых, но, видимо, решаема, поэтому, если кому не лень помочь, то буду рад!
<!DOCTYPE html>
<html>
<head>
<title>Play numbers</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="playRndmNumbers(3)">Play numbers</button>
<div style="display: none">
<div data-id="0">1</div>
<div data-id="1">2</div>
<div data-id="2">3</div>
<div data-id="3">4</div>
</div>
<script>
"use strict";
let numbers = [];
numbers[0] = ['https://zvukipro.com/uploads/files/2021-08/1628310342_odin1.mp3'];
numbers[1] = ['https://zvukipro.com/uploads/files/2021-08/1628310355_dva2.mp3'];
numbers[2] = ['https://zvukipro.com/uploads/files/2021-08/1628310381_tri3.mp3'];
numbers[3] = ['https://zvukipro.com/uploads/files/2021-08/1628310458_chetyer.mp3'];
function playRndmNumbers(count) {
let number = count - 1;
let audio = new Audio(getRndmNumbers());
audio.play();
audio.onended = () => {
setTimeout(() => {
if (number > 0) {
audio.src = getRndmNumbers();
audio.play();
number--;
}
}, 1000);
};
}
function getRndmNumbers() {
return numbers[Math.floor(Math.random() * numbers.length)]
}
</script>
</body>
</html>
