получение ошибки - Uncaught (в обещании) DOMException: play () не удалось, потому что пользователь не взаимодействовал с документом в первую очередь - PullRequest
0 голосов
/ 24 октября 2018

Я хочу воспроизвести аудио как предупреждение, но получаю сообщение об ошибке типа «Uncaught (in обещание) DOMException: play () не удалось, потому что пользователь не взаимодействовал с документом первым.

HTMLКод:

<audio id="alarm" src="alarm.mp3"></audio>

Код JavaScript:

function alarm() {
    var value = document.getElementById("rvoltage").innerHTML;
    if (value > 230) {
        document.getElementById('alarm').play();
    }
}

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Просто добавьте атрибут muted в ваш HTML:

<audio id="alarm" src="alarm.mp3" muted></audio>

В JS просто включите звук, как только он будет воспроизведен.

function alarm() {
    var value = document.getElementById("rvoltage").innerHTML;
    if (value > 230) {
        document.getElementById('alarm').play();
        document.getElementById('alarm').muted = false;
    }
}

Я не проверял этокод, но я думаю, он должен хорошо работать в соответствии с новой политикой.

Подробную информацию о политике автозапуска можно получить здесь: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

0 голосов
/ 24 октября 2018

Это связано с тем, что многие браузеры не позволяют элементам HTML автоматически воспроизводить музыку и видео при загрузке страницы, чтобы сохранить пропускную способность и т. Д. Вы можете создать кнопку и воспроизводить музыку по событию щелчка или обходить его.чтобы он воспроизводился на любом событии клика на вашей странице.

Автозапуск со звуком разрешен, если: пользователь взаимодействовал с доменом (щелчок, нажатие и т. д.).На настольном компьютере превышен порог пользовательского индекса вовлеченности, что означает, что пользователь ранее воспроизводил видео со звуком.На мобильном телефоне пользователь [добавил сайт на свой домашний экран].

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

...