Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request

[asasass]

When I pause the audio button I am receiving this error message:

Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user’s request.

code https://jsfiddle.net/d53e14pf/1/

Any idea on how to resolve this?

I found these:

AbortError: The fetching process for the media resource was aborted by the user agent at the user's request.

https://stackoverflow.com/questions/62962936/unhandled-rejection-aborterror-the-fetching-process-for-the-media-resource-wa

https://github.com/leoasis/react-sound/issues/89

Someone said this: Is there a solution in here?

@lynnporu Thank you very much. I had a video element, that started playing fine when video.load() was called the first time. (i.e. Promise: { state: <fullfilled> } ). But once I did video.pause() , then video.play() just wouldn’t work! . Running video.pause() would cause the error shown above, as many times as video.play() was called before video.pause()

I thing was, I simply had to call video.load() before video.play() !! Thank you, again!

To reproduce the error, click play then pause.

Also, I’m using firefox.

I broke down the code here: https://jsfiddle.net/3gLjo4wr/1/

(function iife() {
   "use strict";

   function show(el) {
      el.classList.remove("hide");
   }

   function hide(el) {
      el.classList.add("hide");
   }

   function getButtonContainer(el) {
      while (el.classList.contains("playButton") === false) {
         el = el.parentNode;
      }
      return el;
   }

   function hideAllButtons(button) {
      button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
   }

   function getPlay(button) {
      return button.querySelector(".play");
   }

   function getPause(button) {
      return button.querySelector(".pause");
   }

   function getSpeaker(button) {
      return button.querySelector(".speaker");
   }

   function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
   }

   function isPlaying(button) {
      const play = getPlay(button);
      return play.classList.contains("hide");
   }

   function pauseAllButtons() {
      var buttons = document.querySelectorAll(".playButton");
      buttons.forEach(function hidePause(button) {
         if (isPlaying(button)) {
            showPlayButton(button);
         }
      });
   }

   function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
      button.classList.add("activated");
   }

   function showSpeakerButton(button) {
      const speaker = getSpeaker(button);
      hideAllButtons(button);
      show(speaker);
   }

   function getAudio() {
      return document.querySelector("audio");
   }

   function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
         player.setAttribute("src", src);
      }
      player.play();
   }

   function showButton(button, opts) {
      if (opts.playing) {
         showPlayButton(button);
      } else {
         showPauseButton(button);
      }
   }

   function pauseAudio(player) {
      player.pause();
   }

   function manageAudio(player, opts) {
      if (opts.playing) {
         pauseAudio(player);
      } else {
         playAudio(player, opts.src);
      }
   }

   function playButton(button) {
      const player = getAudio();
      const playing = isPlaying(button);
      showButton(button, {
         playing
      });
      manageAudio(player, {
         src: button.getAttribute("data-audio"),
         playing
      });
   }

   function showPause(button) {
      if (isPlaying(button)) {
         showPauseButton(button);
      }
   }

   function showSpeaker(button) {
      if (isPlaying(button)) {
         showSpeakerButton(button);
      }
   }

   function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      playButton(button);
   }

   function playButtonMouseoverHandler(evt) {
      const button = getButtonContainer(evt.target);
      showPause(button);
   }

   function playButtonMouseoutHandler(evt) {
      const button = getButtonContainer(evt.target);
      showSpeaker(button);
   }

   function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
      wrapper.addEventListener("mouseover", playButtonMouseoverHandler);
      wrapper.addEventListener("mouseout", playButtonMouseoutHandler);
   }
   initButton(".wrapb");
}());

[Martyr2]

Ok well the audio element’s play() method returns a promise. If you are not sure what this means, think of it as a real life promise… it says that it is going to call play on the media source and it promises, at some later time, to get back to you with an answer to the play being successful or not. Meaning that it is going to go off and do something and get back to you at a later date to tell you if what it was attempting to do was actually achievable. In the meanwhile you can continue on with the code and do other things while you wait.

For more information, I suggest you read up on promises. In short, a promise can succeed or fail. In the case it fails, you need to handle that failure. If you don’t, you are going to get an exception error which is what you are seeing in your console.

So how do you fix it? If the promise is rejected (in this case because it couldn’t load the audio from that IP address you specified) you need to handle the exception so it doesn’t error out in the console.

Your playAudio function may look like this…

function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
         player.setAttribute("src", src);
      }
      try {
      	player.play();
      } catch (err) {
        // If it gets back and was rejected, here we will console log the error to see what exactly failed
        // In your case, the IP address you used failed to load the music. 
      	console.log(err);
      }
   }

To show you this in action, I put in the changes and saved an anonymous fiddle. To show you that it also works, I pointed it to an MP3 file from one of our great sound effect artists at Dream.In.Code named Eric Matyas. His site is soundimage.org and you can find free sounds there to play with.

Here is the updated fiddle…

Edit fiddle - JSFiddle - Code Playground

Enjoy!

[asasass]

Now I understand why I was getting that error.

The media stream link was not working.

Thanks!