Написал такой скрипт.
Предполагается, что при нажатии на кнопку voice-btn, в зависимости от ее id должен рандомно воспроизводиться один из 3х звуков. Но что-то ничего не работает, подскажите где я ошибся?
//Deer sounds
let deer1 = new Audio('sounds/deer1.mp3');
let deer2 = new Audio('sounds/deer2.mp3');
let deer3 = new Audio('sounds/deer3.mp3');
//Fox sounds
let fox1 = new Audio('sounds/fox1.mp3');
let fox2 = new Audio('sounds/fox2.mp3');
let fox3 = new Audio('sounds/fox3.mp3');
//Voice random selection
function randomVoice() {
let rand = 1 + Math.random() * (4 - 1);
return Math.floor(rand);
}
//playingNow - воспроизводится ли звук
let playingNow = false;
//При нажатии на кнопку воспроизведения звука
//Определяем на какую именно кнопу нажали (currentAnimal)
//Рандомно выбираем номер звука 1-3 (voiceNumber)
$('.voice-btn').click(function () {
let currentAnimal = $(this).attr('id');
let voiceNumber = randomVoice();
if (!playingNow){
switch (voiceNumber) {
case 1:
playVoice(currentAnimal + '1');
break;
case 2:
playVoice(currentAnimal + '2');
break;
case 3:
playVoice(currentAnimal + '3');
break;
}
playingNow = true;
}
//Воспроизводит выбранный выше звук
function playVoice(voice) {
voice.play();
}
//Если один из звуков завершился
//разрешаем воспроизводить другой
(currentAnimal + '1').onended = function() {
playingNow = false
};
(currentAnimal + '2').onended = function() {
playingNow = false
};
(currentAnimal + '3').onended = function() {
playingNow = false
};
});
.voice-btn{
background: #000;
color: #fff;
padding: 20px;
margin: 5px 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="voice-btn" id="deer">Олень</div>
<div class="voice-btn" id="fox">Лиса</div>