Как воспроизводить звук уведомления на сайте без запроса автовоспроизведения?

С некоторых пор браузеры стали блочить автовоспроизведение звуков.
Однако же проведённые мною исследования мессенджеров показали, что ни один из них не запрашивает права на автоматическое воспроизведение звука.
Так как же мне сделать тоже самое на моём сайте?
Делаю уведомления.
Кусок тестового кода, для того чтоб понять
$(function () {
            let audio = new Audio();
            audio.preload = 'auto';
            audio.src = '/wp-content/uploads/2019/05/notif_bell.mp3';

            let notif_list = [
                {
                    title: 'Тестовый уведомление №1',
                    description: 'Просто описание уведомлениа №1',
                    date: {
                        start: <?= date($time_format, time()); ?>,
                        end: <?= date($time_format, time() + 60 * 30); ?>
                    },
                    played: false,
                },
                {
                    title: 'Тестовый уведомление №2',
                    description: 'Просто описание уведомлениа №2',
                    date: {
                        start: <?= date($time_format, time() + 60); ?>,
                        end: <?= date($time_format, time() + 60 * 31); ?>
                    },
                    played: false,
                }
            ];

            let $modal = $('#rek-notif');

            let isPaused = false;

            $modal.on('click', '.click', function () {
                $modal.fadeOut('500');
                isPaused = false;
            });

            audio.onloadeddata = function () {

                setInterval(function () {
                    let ts = Math.floor(new Date() / 1000);

                    $.each(notif_list, function (i, notif_item) {
                        if (isPaused) {
                            return;
                        }

                        if (!isPaused && !notif_item.played && ts >= notif_item.date.start && ts <= notif_item.date.end) {

                            let promise = audio.play();

                            if (promise !== undefined) {
                                promise.then(_ => {

                                    isPaused = true;
                                    notif_list[i].played = true;

                                    $modal.find('.title').text(notif_list[i].title);
                                    $modal.find('.description').text(notif_list[i].description);

                                    $modal.fadeIn('500');
                                }).catch(error => {
                                    // Autoplay was prevented.
                                    // Show a "Play" button so that user can start playback.
                                });
                            }

                            setTimeout(function () {
                                $modal.fadeOut('500');
                                isPaused = false;
                            }, 10000);
                        }
                    });
                }, 1000);
            };
        })

Ладно хром, там пока пользователь не начнёт взаимодействовать со страницей.
А вот лиса совсем блочит.
Как решить данную проблему?
(Ошибки в строковых данных кода и классах(айди) могут быть из-за автозамены чисто для тостера)
  • Вопрос задан
  • 286 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы