How to handle Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

Question

Below is my code in aspx page to allow playing audio's of wav format in the browser but with my current code I am unable to play wav audios in Chrome browser but it works in Firefox. How can I handle this exception?

<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>

why are you attempting to run `play()` twice on page load? remove one of those lines for a better life — Jaromanda X, Oct 27 '16 at 05:29

score 52 · Answer 1 · edited Apr 19 '19 at 15:59

52

For Chrome they changed autoplay policy, so you can read about here:

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.
    });
}

edited Apr 19 '19 at 15:59

Augusto

2,125
18
27

answered Nov 06 '18 at 07:53

Vladislav Nosenko

641
5
3

score 19 · Answer 2 · answered Oct 27 '16 at 05:29

19

Try using a callback like this with the catch block.

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

answered Oct 27 '16 at 05:29

zapping

4,118
6
38
56

1

that will break if play doesn't return a promise (currently, play() only returns a promise in Chrome I believe) – Jaromanda X Oct 27 '16 at 05:29
again i am getting this Uncaught TypeError: Cannot read property 'play' of null – Oct 27 '16 at 05:31
1

Are you sure your DOM has loaded when its being called to play? – zapping Oct 27 '16 at 05:34
document.addEventListener("DOMContentLoaded", function (event) { var audio = document.getElementsByTagName("audio")[0]; audio.pause(); }); I had didi in this way there is no error but audio doesn't gets played – Oct 27 '16 at 05:38
window.onload = function () { document.getElementById("audio").play().catch(function() { console.log('hello exception'); }); – zapping Oct 27 '16 at 06:41

Sharpey · Answer 3 · 2017-01-24T07:49:36.250

I don't know if this is still actual for you, but I still leave my comment so maybe it will help somebody else. I had same issue, and the solution proposed by @dighan on bountysource.com/issues/ solved it for me.

So here is the code that solved my problem:

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

It still throws an error into console, but at least the video is playing :)

score 12 · Answer 4 · answered Feb 08 '19 at 10:07

All new browser support video to be auto-played with being muted only so please put

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

Something like this

URL of video should match the SSL status if your site is running with https then video URL should also in https and same for HTTP

score 7 · Answer 5 · answered Apr 10 '19 at 10:12

7

adding muted="muted" property to HTML5 tag solved my issue

answered Apr 10 '19 at 10:12

Akhtarujjaman Shuvo

630
9
17

yusufmalikul · Answer 6 · 2019-08-05T08:04:12.253

0

I am using Chrome version 75.

add the muted property to video tag

<video id="myvid" muted>

then play it using javascript and set muted to false

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

edit: need user interaction (at least click anywhere in the page to work)

edited Aug 05 '19 at 08:04

answered Aug 05 '19 at 07:55

yusufmalikul

508
1
9
26

Phrank · Answer 7 · 2019-08-29T12:22:26.643

I second Shobhit Verma, and I have a little note to add : in his post he told that in Chrome (Opera for myself) the players need to be muted in order for the autoplay to succeed... And ironically, if you elevate the volume after load, it will still play... It's like all those anti-pop-ups mechanic that ignore invisible frame slid into your code... php-echoed html and javascript is : 10-second setTimeout onLoad of body tag that rises volume to maximum, video with autoplay and muted='muted' (yeah that $muted_code part is = "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%'>";

score 0 · Answer 8 · answered Oct 02 '19 at 08:00

In my case I had to wait for a user interaction, so I set a click or touchend listener.

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

function play(){
    audioEl.play()
}


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

How to handle Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

8 Answers8

Linked