uncaught (in promise) DOMexception – Code Example

uncaught (in promise) DOMexception is raised by browsers when something wrong is there in DOM and exception is thrown but there is no function to catch it. It is generally raised when you try to autoplay an audio.

Autoplay functionality is turned off by Google Chrome because it distracted people and could lead to serious issues. For example, you are sitting in your work office and referring to an article for a coding problem and suddenly website started auto playing some audio. The whole office will be shocked, disturbed and you will feel embarrassed.

To prevent any such incidents, Google Chrome prevented autoplay completely. If you try to implement it, you will get uncaught (in promise) DOMexception: the play() request was interrupted by a call to pause().

Solution with Code Example

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

You can also use muted on video tag –

<video autoplay muted="muted" loop id="myVideo">
  <source src="video_url" type="video/mp4">
</video>