С некоторых пор браузеры стали блочить автовоспроизведение звуков.
Однако же проведённые мною исследования мессенджеров показали, что ни один из них не запрашивает права на автоматическое воспроизведение звука.
Так как же мне сделать тоже самое на моём сайте?
Делаю уведомления.
Кусок тестового кода, для того чтоб понять
$(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);
};
})
Ладно хром, там пока пользователь не начнёт взаимодействовать со страницей.
А вот лиса совсем блочит.
Как решить данную проблему?
(Ошибки в строковых данных кода и классах(айди) могут быть из-за автозамены чисто для тостера)
