Ошибка: play() can only be initiated by a user gesture (мобильный Chrome)

#google_chrome #mobile #мобильная_разработка #ionic

Делаем приложение через Ionic/Cordova; компилю на платформу browser; через библиотeку
медиа пытаюсь запустить мелодию по событию (пришел заказ от клиента).

Столкнулся с такой проблемой: если PUSH работает нормально, то на попытку инициализировать
звук когда открыто приложение через мобильный хром — ну ни как не получается. Вылетает
такая ошибка:


  Uncaught (in promise) DOMException: play() can only be initiated by a
  user gesture.


И да, я читал, что это такое и немного вот об этом и этом.

Понаходил советы, что нужно вызов проигрывания цеплять на click или другой жест.
Но, при всех прочих, захожу в ВК с мобильного браузера, смотрю на страницу — мне присылают
сообщение, и звук идёт (не от PUSH, а от браузера)!

Вопрос: как у них это получилось? И как мне сделать такое же (хотя бы в теории)?
Буду рад любым идеям. Спасибо.
    

Ответы

Ответ 1

function initAudioItems(e) {
    if (e.originalEvent !== undefined) {
            var dom_item = document.getElementById('my_audio');
            dom_item.muted = true;
            dom_item.play()
                .catch(function(e) {
                    console.log(e);
                });
            dom_item.pause();
            dom_item.muted = false;
            $(dom_item).data('init', true);
        $('body').off('click', initAudioItems);
    }
}
// init audio
$('body').on('click', initAudioItems);


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

Как ни старался не смог найти как такую инициализацию повесить на пролистывание,
только на клик работает.


Ответ 2

Вы на полпути к решению, осталась только одна деталь - сохранение дом элемента audio
для повторного использования.

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

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

А также этот элемент после инициализации можно перемещать в DOM документа

Все вышесказанное относится как к сайту так и к приложению. Знаю что есть опция в
настройках cordova разрешающая автовоспоизведение без взаимодействия с пользователем,
но к сожалению она не на всех версиях android работает так как должна.