0

Только начинаю изучать JS, хочу написать простенький таймер, чтобы при нуле секунд проигрывался звуковой файл, но почему-то не работает, хотя если делать наоборот, т.е. таймер идет на увеличение и звук проигрывается при конкретном значении, то все работает. Пробовал уже передавать не введенные данные, а сразу изначальное значение, вставил алерт и вывод в консоль, работает, вставил на страницу просто текст, чтобы файл проигрывался при клике на текст - работает, вызывал функцию вручную через консоль - работает, а через функцию в коде нифига, пробовал менять значение, при котором должен звук проигрываться, все равно не работает.

Вот код, где не работает:

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <title>Таймер</title>
    <meta charset="utf-8" />
</head>

<body onload="start()">
<!--<div>Введите количество минут и нажмите "Старт"</div>-->

<!--<div>-->
<!--    &lt;!&ndash;Кнопка и в ней событие по клику - start, по которому будет запускаться функция start&ndash;&gt;-->
<!--    <input type="button" name="start_button" value="Старт" onclick="start()"/><br>-->
<!--</div>-->
<!--Создаем HTML, где будет таймер-->
<h1 id="header"></h1>

<!--<audio src="bonem.mp3" autoplay="autoplay"></audio>-->
<p onclick="sound()">Кликни по этому тексту для запуска аудио</p>

<script>
    // var min = prompt('Введите минуты', '');
    var min = 1;
    /*Объявляем переменную, в которой будет храниться значение таймера*/
    var h1 = document.getElementById("header");

    /*Объявляем переменную, в которой будет хранится количество секунд*/
    var secund = min*60;

    /*Функция, которая запускает звуковой файл*/
    var sound = function () {
        var audio = new Audio(); // Создаём новый элемент Audio
        audio.src = '../media/bonem.mp3'; // Указываем путь к звуку "клика"
        audio.autoplay = true; // Автоматически запускаем
        console.log(secund);
    };

    /*Объявляем функцию, которая запускает таймер, функция перезапускается каждую секунду*/
    function start() {

        secund--; /*Каждую итерацию уменьшаем количество секунд на 1*/

        if(secund===0){
            sound(); /*Не работает!*/
            alert('Алярьм!');
            return;
        }

        /*Если меньше 10 секунд, то добавляем 0 перед минутами и секундами - это для красоты, не обязательно*/
        if (secund>0&&secund<10 ) {
            h1.textContent = ("1Осталось времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
        }

        /*Если меньше 10 минут, то*/
        if(secund>=10&&secund<600){
            if (secund%60 >= 0 && secund%60 < 10 ) {
                /*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
                h1.textContent = ("2.1Осталось времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
            } else {
                /*Добавляем 0 перед минутами, не обязательно, для красоты*/
                h1.textContent = ("2.2Осталось времени: 0" + Math.floor(secund / 60) + ":" + secund % 60);
            }
        }

        /*Если больше 10 минут, то 0 перед минутами уже не добавляем, только перед первыми 10 секундами*/
        if(secund >=600){
            if (secund%60 >= 0 && secund%60 < 10 ) {
                /*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
                h1.textContent = ("2.1Осталось времени: " + Math.floor(secund / 60) + ":0" + secund % 60);
            } else {
                /*Добавляем 0 перед минутами, не обязательно, для красоты*/
                h1.textContent = ("3Осталось времени: " + Math.floor(secund / 60) + ":" + secund % 60);
            }
        }

        /*Если больше 15 минут, то проигрываем звуковой файл*/

        setTimeout(start, 10); /*Частота перезапуска функции, мс*/
    }



</script>

</body>

</html>

А на увеличение работает, хотя вроде бы все то же самое:

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <title>lost connect</title>
    <meta charset="utf-8" />
</head>

<body>
<!--<div>Введите количество минут и нажмите "Старт"</div>-->

<div>
    <!--Кнопка и в ней событие по клику - start, по которому будет запускаться функция start-->
    <input type="button" name="start_button" value="Старт" onclick="start()"/><br>
</div>
<!--Создаем HTML, где будет таймер-->
<h1 id="header"></h1>

<!--<audio src="bonem.mp3" autoplay="autoplay"></audio>-->
<p onclick="sound()">Кликни по этому тексту для запуска аудио</p>

<script>
    /*Объявляем переменную, в которой будет храниться значение таймера*/
    var h1 = document.getElementById("header");

    /*Объявляем переменную, в которой будет хранится количество секунд*/
    var secund = 0;

    /*Функция, которая запускает звуковой файл*/
    var sound = function () {
        var audio = new Audio(); // Создаём новый элемент Audio
        audio.src = '../media/bonem.mp3'; // Указываем путь к звуку "клика"
        audio.autoplay = true; // Автоматически запускаем
    };

    /*Объявляем функцию, которая запускает таймер, функция перезапускается каждую секунду*/
    function start() {

        secund++; /*Каждую итерацию увеличиваем количество секунд на 1*/

        /*Если меньше 10 секунд, то добавляем 0 перед минутами и секундами - это для красоты, не обязательно*/
        if (secund<=10 ) {
            h1.textContent = ("1Прошло времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
        }

        /*Если меньше 10 минут, то*/
        if(secund>=10&&secund<600){
            if (secund%60 >= 0 && secund%60 < 10 ) {
                /*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
                h1.textContent = ("2.1Прошло времени: 0" + Math.floor(secund / 60) + ":0" + secund % 60);
            } else {
                /*Добавляем 0 перед минутами, не обязательно, для красоты*/
                h1.textContent = ("2.2Прошло времени: 0" + Math.floor(secund / 60) + ":" + secund % 60);
            }
        }

        /*Если больше 10 минут, то 0 перед минутами уже не добавляем, только перед первыми 10 секундами*/
        if(secund >=600){
            if (secund%60 >= 0 && secund%60 < 10 ) {
                /*Первые 10 секунд в минуте добавляем 0 перед секундами - не обязательно, для красоты*/
                h1.textContent = ("2.1Прошло времени: " + Math.floor(secund / 60) + ":0" + secund % 60);
            } else {
                /*Добавляем 0 перед минутами, не обязательно, для красоты*/
                h1.textContent = ("3Прошло времени: " + Math.floor(secund / 60) + ":" + secund % 60);
            }
        }

        /*Если больше 15 минут, то проигрываем звуковой файл*/
        if(secund===900){
            // alert('Алярьм!');
            sound();
        }
        setTimeout(start, 10); /*Частота перезапуска функции, мс*/
    }


</script>

</body>

</html>

Не пойму, в чем разница, кусок кода с функцией, которая звуковой файл проигрывает пробовал уже в разные места переставлять, и в начало и в конец, не помогает

2
  • В консоли же всё написано.
    – Qwertiy
    18 июл 2020 в 1:22
  • В смысле? Я вижу, что у меня в консоли только вывод самой переменной secund, который я для отладки сделал, а что какие-то ошибки при вопроизведении музыки у меня в консоли не видно и в вебшторме тоже вроде все в порядке
    – Юрий
    18 июл 2020 в 4:06

1 ответ 1

1

Разница в кодах очень даже существенная - в коде на увеличение таймер запускается нажатием на кнопку старт или воспроизведение запускается кликом по тексту. Современные версии браузеров не поддерживают автовоспроизведение звука с помощью тегов audio, embed, bgsound.

4
  • Да, переписал через кнопку, заработало, большое спасибо, подскажите, а есть еще какие-то варианты оповещения на JS кроме вывода алерта и запуска аудио/видео? А у то я когда наушники сняты и браузер свернут могу пропустить оповещение... Может можете ссылку какую-нибудь дать, где про это почитать?
    – Юрий
    19 июл 2020 в 2:34
  • А то у меня есть мониторилка, которая не моя, она на страницу браузера выводит плитки по разным ресурсам и если ресурс недоступ, то красит плитку в красный цвет, вот я и хотел свою оповещалку поверх написать, чтобы если плитка больше 5 минут красным горит, у меня какое-нибудь оповещение было, хотя бы звуковое, чтобы глазами все время не мониторить.
    – Юрий
    19 июл 2020 в 2:34
  • Дело в том, что Ваш первый код на уменьшение тоже будет работать, если до того, как таймер своё отсчитает, успеете сделать любое пользовательское действие на странице - кликнуть в любом месте или нажать на любую клавишу или совершить скроллирование. Стоит один раз это сделать, и звук будет звучать при каждом оповещении в авторежиме.
    – Опан
    19 июл 2020 в 10:26
  • Ещё кроме звука можно сделать, чтобы по приходу оповещения окно автоматически разворачивалось, если оно до этого было свёрнутым. Можно даже и звук и это.
    – Опан
    19 июл 2020 в 10:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.