Tips for managing Uncaught (in promise) DOMException: An interruption in the play() request due to a pause() call

Question

Tips for managing Uncaught (in promise) DOMException: An interruption in the play() request due to a pause() call

My code in the aspx page allows for playing audio files of wav format within the browser. However, I have encountered an issue where wav audios are not playing in Chrome browser, while they work in Firefox. How can I address 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>

javascript asp.net wav

Answer 1

Answer №1

Google Chrome has updated its autoplay policy, which means you may need to adjust your code accordingly. You can find more information here:

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

if (promise !== undefined) {
    promise.then(_ => {
        // Autoplay started!
    }).catch(error => {
        // Autoplay was prevented.
        // Display a "Play" button for user interaction.
    });
}

Answer 2

Google Chrome has updated its autoplay policy, which means you may need to adjust your code accordingly. You can find more information here:

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

if (promise !== undefined) {
    promise.then(_ => {
        // Autoplay started!
    }).catch(error => {
        // Autoplay was prevented.
        // Display a "Play" button for user interaction.
    });
}

Answer 3

Answer №2

Consider implementing a callback similar to this within the catch block:

document.getElementById("sound").load().catch(function() {
    // take appropriate action
});

Answer 4

Consider implementing a callback similar to this within the catch block:

document.getElementById("sound").load().catch(function() {
    // take appropriate action
});

Answer 5

Answer №3

Not sure if you still need this information, but I'll leave my comment here just in case it helps someone else out there. I experienced a similar issue and found a solution suggested by @dighan on bountysource.com/issues/ that worked for me.

Here is the code snippet that resolved the problem for me:

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

Although it still triggers an error in the console, at least the video plays now :)

Answer 6

Not sure if you still need this information, but I'll leave my comment here just in case it helps someone else out there. I experienced a similar issue and found a solution suggested by @dighan on bountysource.com/issues/ that worked for me.

Here is the code snippet that resolved the problem for me:

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

Although it still triggers an error in the console, at least the video plays now :)

Answer 7

Answer №4

Ensure that all new browsers support video autoplay, but only when muted. To achieve this, use the following code:

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

Consider implementing a solution similar to this.

Make sure the URL of the video aligns with the SSL status of your website. If your site is running on HTTPS, the video URL should also use HTTPS, and the same goes for HTTP.

Answer 8

Ensure that all new browsers support video autoplay, but only when muted. To achieve this, use the following code:

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

Consider implementing a solution similar to this.

Make sure the URL of the video aligns with the SSL status of your website. If your site is running on HTTPS, the video URL should also use HTTPS, and the same goes for HTTP.

Answer 9

Answer №5

My problem was resolved by adding the muted="muted" property to the HTML5 audio tag.

Answer 10

My problem was resolved by adding the muted="muted" property to the HTML5 audio tag.

Answer 11

Answer №6

I am currently running Chrome version 75.

To mute a video, simply add the muted property to the video tag:

<video id="myvid" muted>

Then use JavaScript to play the video and set the muted attribute to false:

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

Note: User interaction is required for this to work (at least clicking anywhere on the page).

Answer 12

I am currently running Chrome version 75.

To mute a video, simply add the muted property to the video tag:

<video id="myvid" muted>

Then use JavaScript to play the video and set the muted attribute to false:

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

Note: User interaction is required for this to work (at least clicking anywhere on the page).

Answer 13

Answer №7

Adding to Shobhit Verma's point, I would like to mention that he highlighted the need to mute the players in Chrome (Opera for me) for autoplay to work. Interestingly, even if you increase the volume after loading, the video will still play... It's reminiscent of those anti-pop-up mechanisms that sneak into your code as invisible frames. The php-echoed html and javascript snippet looks something like this: A 10-second setTimeout function is applied on the body tag upon load, which sets the volume to maximum, initializes a video with autoplay and muted='muted' attribute.

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%'>";

Answer 14

Adding to Shobhit Verma's point, I would like to mention that he highlighted the need to mute the players in Chrome (Opera for me) for autoplay to work. Interestingly, even if you increase the volume after loading, the video will still play... It's reminiscent of those anti-pop-up mechanisms that sneak into your code as invisible frames. The php-echoed html and javascript snippet looks something like this: A 10-second setTimeout function is applied on the body tag upon load, which sets the volume to maximum, initializes a video with autoplay and muted='muted' attribute.

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%'>";

Answer 15

Answer №8

For me, I found myself in a situation where I needed to wait for a user interaction before proceeding. To achieve this, I implemented a listener for either a click or touchend event.

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

function initiatePlayback(){
    audioElement.play()
}

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

Answer 16

For me, I found myself in a situation where I needed to wait for a user interaction before proceeding. To achieve this, I implemented a listener for either a click or touchend event.

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

function initiatePlayback(){
    audioElement.play()
}

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

Tips for managing Uncaught (in promise) DOMException: An interruption in the play() request due to a pause() call

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

An introduction to integrating Paged.js with Vue.js3

Looking to convert a jQuery function to plain JavaScript code?

Using JavaScript to bring in npm packages

Leveraging EHLAPI32 within C# for integration with RUMBA as the selected emulation provider

The issue of JavaScript text not being able to be selected persists in Chrome and Internet Explorer

Searching for a specific string within an array using JavaScript: tips and tricks!

Passing large arrays of data between pages in PHP

Ways to clear TextField status

Issue with Gridview CheckboxList in Edit Mode due to unset values

Is Node.js compatible with Mysql Schema?

Console displays null as the attribute value

Error message: Please provide an expression with const in React JS component

Executing a node.js function within an Angular 2 application

How can I iterate through multiple rows in JavaScript?

Shader in THREE.js designed to accommodate ControlNet for normal calculations

Update the styling for the second list item within a specified unordered list class instantaneously

Retrieving specific elements in JavaScript from a JSON file

An issue occurred while trying to process the XHR response text for files of a large size

Guide on how to append to a nested array within a React component?

Is it possible to have an object nested within a function? How about a function within a function? I'm determined to grasp