Javascript аудио л oop в 3 раза - PullRequest
Новая
       2

Javascript аудио л oop в 3 раза

1 голос
/ 21 февраля 2020

Мне нужно повторить звук 3 раза на моей странице. Я попробовал то же самое по приведенному ниже коду. Но audio.play (), похоже, не ждет завершения клипа. Пожалуйста, помогите по тому же. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }
        async function play() {

            var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
            for (let index = 0; index <3; index++) {

                await sleep(1000);
                await console.log(index)
                await audio.play();

            }

        }
    </script>
</head>
<body>

  <button type='button' onclick="play()">Play</button>


</body>
</html>

1 Ответ

0 голосов
/ 21 февраля 2020

Использование setTimeout не нужно заключать в обещание, вам просто нужно сделать так, чтобы следующий вызов воспроизведения срабатывал в обратном вызове setTimeout. Я бы предложил сделать это с помощью рекурсивной функции: 

function playSound(audio, numberOfTimes = 1, delay = 3000, firstTime = true ){
    if(firstTime){
       audio.play();
    }
    setTimeout( () => {
       if(!firstTime){
           audio.play();
       }
       numberOfTimes--;
       if(numberOfTimes > 0){
         playSound(audio,numberOfTimes,delay, false);
       }
    }, delay)
  }

  function playTRexRoar() {
        var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
        playSound(audio,3,3000);
    }

  playTRexRoar();

(Редактировать: добавлена ​​проверка, воспроизводится ли клип в первый раз, чтобы он мог воспроизводиться немедленно, а не в ожидании задержка)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...