Как обрабатывать Uncaught (в обещании) DOMException: запрос play() был прерван вызовом pause()

Ниже приведен мой код на странице aspx, позволяющий воспроизводить аудио в формате wav в браузере, но с моим текущим кодом я не могу воспроизводить аудио wav в браузере Chrome, но он работает в Firefox. Как я могу обработать это исключение?

<script>
    window.onload = function () { document.getElementById("audio").play(); }
    window.addEventListener("load", function () { document.getElementById("audio").play(); });
</script>

<body>
    <audio id='audio' controls autoplay>
        <source src="Sounds/DPM317.wav" type="audio/wav" />
        Your browser does not support the audio element.
    </audio>
</body>

Ответ 1

Для Chrome они изменили политику автозапуска, поэтому вы можете прочитать о здесь:

var promise = document.querySelector('audio').play();

if (promise !== undefined) {
    promise.then(_ => {
        // Autoplay started!
    }).catch(error => {
        // Autoplay was prevented.
        // Show a "Play" button so that user can start playback.
    });
}

Ответ 2

Я не знаю, актуально ли это для вас, но я все же оставляю свой комментарий, так что, возможно, это поможет кому-то еще. У меня была та же проблема, и решение, предложенное @dighan на bountysource.com/issues/, решило ее для меня.

Итак, вот код, который решил мою проблему:

var media = document.getElementById("YourVideo");
const playPromise = media.play();
if (playPromise !== null){
    playPromise.catch(() => { media.play(); })
}

Все равно выдает ошибку в консоль, но по крайней мере видео играет :)

Ответ 3

Все новые браузеры поддерживают видео для автоматического воспроизведения с отключенным звуком, поэтому, пожалуйста, установите

<video autoplay muted="muted" loop id="myVideo"> <source src="https://wrglob.net/Coastline-3581.mp4" type="video/mp4"> </video>

Что-то вроде этого

URL-адрес видео должен соответствовать статусу SSL, если ваш сайт работает с https, тогда URL-адрес видео также должен быть в https и такой же для HTTP

Ответ 4

Попробуйте использовать обратный вызов, подобный этому, с блоком catch.

document.getElementById("audio").play().catch(function() {
    // do something
});

Ответ 5

добавление свойства muted="muted" в тег HTML5 решило мою проблему

Ответ 6

Я использую Chrome версии 75.

добавьте свойство muted в тег видео

<video id="myvid" muted>

затем воспроизведите его, используя javascript, и установите для muted значение false

var myvideo = document.getElementById("myvid");
myvideo.play();
myvideo.muted = false;

изменение: необходимо взаимодействие с пользователем (по крайней мере, нажмите в любом месте страницы, чтобы работать)

Ответ 7

Я второй Shobhit Verma, и у меня есть небольшая заметка, чтобы добавить: в своем посте он сказал, что в Chrome (Opera для меня), игроки должны быть отключены, чтобы автоигра была успешной... И по иронии судьбы, если вы повысите громкость после загрузки, он все равно будет играть... Это как все те механики против всплывающих окон, которые игнорируют невидимые рамки, которые попали в ваш код... php-echoed html и javascript это: 10-секундный setTimeout onLoad тега body, который увеличивает громкость до максимума, видео с автоматическим воспроизведением и muted = 'muted' (да, часть $ muted_code = = muted = 'muted ")

echo "<body style='margin-bottom:0pt; margin-top:0pt; margin-left:0pt; margin-right:0pt' onLoad=\"setTimeout(function() {var vid = document.getElementById('hourglass_video'); vid.volume = 1.0;},10000);\">";
    echo "<div id='hourglass_container' width='100%' height='100%' align='center' style='text-align:right; vertical-align:bottom'>";
    echo "<video autoplay {$muted_code}title=\"!!! Pausing this video will immediately end your turn!!!\" oncontextmenu=\"dont_stop_hourglass(event);\" onPause=\"{$action}\" id='hourglass_video' frameborder='0' style='width:95%; margin-top:28%'>";

Ответ 8

В моем случае мне пришлось ждать взаимодействия с пользователем, поэтому я установил прослушиватель click или touchend.

const isMobile = navigator.maxTouchPoints || "ontouchstart" in document.documentElement;

function play(){
    audioEl.play()
}


document.body.addEventListener(isMobile ? "touchend" : "click", play, { once: true });