Воспроизведение аудио по окончанию времени

Question

Сайт (clavaqwerty.xyz/10.html) выполняет функцию таймера, и когда таймер показывает 0 дней 0 часов 0 минут 0 секунд, то должно выводиться сообщение о том, что время вышло и воспроизводится аудио. Однако, аудио воспроизводится с большой задержкой, с паузами и в очень странной форме (как будто поставили громкость на 200), хотя изначально множество раз проверялось, что с ним всё нормально. Вот код данной страницы:

<html>
    <head>
        <style>
            #group, #title {
                font-family: Bahnschrift;
                text-align: center;
                margin-top: 5%;
            }
            #post {
                margin-top: 20%;
                text-align: right;
                font-family: IBM Plex Sans, Helvetica, Century Gothic, Arial Black, sans-srif;
                color: black;
            }
        </style>
        <link rel="icon" type="image/png" href="/h.png" />
        <title>Счётчик дней</title>
        <meta charset="utf-8">
    </head>
<body>
<h1 id="title">До начала лета осталось</h1>
<div id="group">
<span id="d"></span><br/>
<span id="h"></span><br/>
<span id="m"></span><br/>
<span id="s"></span><br/>
<span id="ms"></span><br/>
</div>
<script>
    let date = new Date('May 31 2021 21:23:15');
    
    function counts() {
        let now = new Date();
        gap = date - now;
        console.log(gap);
        
        let days = Math.floor(gap / 1000 / 60 / 60 / 24);
        let hours = Math.floor(gap / 1000 / 60 / 60) % 24;
        let minutes = Math.floor(gap / 1000 / 60) % 60;
        let seconds = Math.floor(gap / 1000) % 60;
        let millisec = Math.floor(gap) % 1000;
        console.log(days);
        
            if (gap >= 0) {
        document.getElementById('d').innerText = days + ' дней';
        document.getElementById('h').innerText = hours + ' часов';
        document.getElementById('m').innerText = minutes + ' минут';
        document.getElementById('s').innerText = seconds + ' секунд';
        document.getElementById('ms').innerText = millisec + ' миллисекунд';
            } else {
       document.getElementById('group').innerText = 'Лето наступило!';
       soundClick();
       }
    }
    counts();
    
        function soundClick() {
  var audio = new Audio(); 
  audio.src = 'music.mp3'; 
  audio.autoplay = true; 
}
    
    setInterval(counts, 1);
</script>
<p id="post"><em><b>Made at <a href="/index.html">SEP Technology</a></b></em>, 2021</p>
</body>
</html>

Заранее спасибо!

Answer 1

Время в setInterval задаётся в милисекундах, а не в секундах, поэтому аргумент следует поменять из 1 на 1000.
Когда лето наступило, таймер следует останавливать. Для этого присвоить ему имя, скажем,

var myinterval = setInterval(counts, 1000);

а условие else начать с остановки таймера:

clearInterval(myinterval);

Уже много об этом говорили, что пока не будет выполнено действие посетителя на странице, (клик, скролл, нажтие на клавишу) автоматического воспроизведения звука не будет. В вашей ситуации получается, что он должен быть проигран сразу после загрузки страницы.

БЛОГ НА HUSL

Воспроизведение аудио по окончанию времени

Ответы (1 шт):