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

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:

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");
}());

Hello I’m Muhhanansd ali