音频文件暂停一次后，播放将不再起作用

Question

尝试进行以下工作：

在我的音频播放器中，单击顶部的专辑img，会播放一个附加到图像（专辑封面）的音频文件。当我通过“暂停”按钮暂停音频时，效果很好。但是，如果我尝试按“播放”按钮并继续播放，它将给我一个诺言错误（播放被暂停中断），或者DOM无法获取音频源错误并且不再播放文件。 如果有人可以帮助我找出为什么在按下暂停按钮后播放按钮不起作用，那真是棒极了。

var carousel2 = document.querySelector('.carousel2'),
  figure2 = carousel2.querySelector('figure'),
  nav2 = carousel2.querySelector('nav'),
  numImages = figure2.childElementCount,
  theta = 2 * Math.PI / numImages,
  currImage = 0;


nav2.addEventListener('click', onClicks, true);


function onClicks(e) {
  e.stopPropagation();

  var t = e.target;
  if (t.tagName.toUpperCase() != 'BUTTON')
    return;

  if (t.classList.contains('next')) {
    currImage++;
  } else {
    currImage--;
  }

  figure2.style.transform = `rotateY(${currImage * -theta}rad)`;
}


var pause2 = document.querySelector('#pause2');
var play2 = document.querySelector('#play2');

var innerC2 = document.querySelector('.innerCircle2');
var outerC2 = document.querySelector('.outerCircle2');
var paused2 = document.querySelector('#track2');
var audio2 = new Audio('audio2.mp3');
var icon2 = document.querySelector('.icon2');

pause2.addEventListener('click', event => {
  innerC2.classList.add('hide');
  outerC2.classList.add('hide');
  paused2.classList.add('paused');
  icon2.classList.remove('animicon');
  audio2.pause();
});

play2.addEventListener('click', e => {
  innerC2.style.visibility = 'visible';
  outerC2.style.visibility = 'visible';
  innerC2.classList.remove('hide');
  outerC2.classList.remove('hide');
  icon2.classList.add('animicon');
  artist2.innerHTML = 'FKA Twigs';
  paused2.innerHTML = 'Video Girl';
  audio2.play();

});



var fig2 = document.getElementsByClassName('figure2');
var artist2 = document.querySelector("#artist2");
var artist = document.querySelector('#artist');
$('img').click(function(e) {
  e.stopPropagation();
  let art = e.target.getAttribute('alt');
  let newTrack = e.target.getAttribute('name');
  let music = e.target.getAttribute('value');
  paused2.innerHTML = newTrack;
  artist2.innerHTML = art;
  audio2.pause();
  audio2 = new Audio(music);
  audio2.play();

});

body {
  background: linear-gradient(to bottom, rgba(23, 23, 23, 0.63), rgba(23, 23, 23, 0.23)), url("https://cdn.pixabay.com/photo/2013/07/12/18/17/equalizer-153212_960_720.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(23, 23, 23, 0.93);
  display: flex;
  justify-content: center;
  height: 100vh;
  flex-direction: row;
  flex-wrap: wrap;
}

@media(max-width:670px) {
  #player2 {
    display: none;
  }
  ;
}


#player2 {
  width: 370px;
  height: 630px;
  border-radius: 40px;
  background: linear-gradient(315deg, #ffffff, #e9e9e9);
  box-shadow: -3px -3px 7px #a9a9a9, 3px 3px 7px #ffffff;
  margin-top: -60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid gray;
  position: relative;
  margin-left: 0px;
  margin-bottom: 5px;
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}


#track2 {
  background: radial-gradient(rgb(236, 78, 184), rgb(24, 23, 23));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Josefin sans', sans-serif;
  text-shadow: 1px 1px 20px rgb(228, 247, 247);
  text-align: center;
  margin-top: 5px;
  font-size: 26px;
}

@keyframes fade {
  0%,
  100% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
}



#artist2 {
  font-family: 'Dosis';
  font-size: 16px;
  color: rgb(8, 54, 107);
  text-align: center;
  margin-top: -15px;
}

#playing {
  justify-content: center;
  align-items: center;
  width: 380px;
}

#record {
  position: relative;
  width: 380px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
  margin-top: -10px;
}


.animicon {
  -moz-animation: rotatecircle 6s infinite;
  -webkit-animation: rotatecircle 6s infinite;
}

.icon2 {
  background: url('https://cdn.pixabay.com/photo/2012/04/13/13/23/disc-32390_960_720.png') 0 0 no-repeat;
  background-size: cover;
  width: 150px;
  height: 150px;
  margin: 10px auto;
}



.outerCircle2 {
  background-color: transparent;
  border: 6px solid rgba(126, 125, 125, 0.7);
  opacity: .9;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-radius: 100px;
  width: 156px;
  height: 156px;
  margin: 0 auto;
  position: absolute;
  top: -0.5%;
  left: 28%;
  visibility: hidden;
  -moz-animation: spinPulse 2s infinite ease-in-out;
  -webkit-animation: spinPulse 2s infinite ease-in-out;
}

.innerCircle2 {
  background-color: transparent;
  border: 2px solid rgb(247, 67, 202);
  opacity: .9;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 100px;
  position: absolute;
  top: 4%;
  left: 29%;
  width: 149px;
  height: 148px;
  margin: 0 auto;
  visibility: hidden;
  -moz-animation: spinoffPulse 1s infinite linear;
  -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
  0% {
    -moz-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #bdd73c;
  }
  50% {
    -moz-transform: rotate(145deg);
    opacity: 1;
  }
  100% {
    -moz-transform: rotate(-320deg);
    opacity: 0;
  }
}

@-moz-keyframes spinoffPulse {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spinPulse {
  0% {
    -webkit-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #bdd73c;
  }
  50% {
    -webkit-transform: rotate(145deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-320deg);
    opacity: 0;
  }
}

@-webkit-keyframes spinoffPulse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotatecircle {
  0% {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(-180deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
  }
}

@-webkit-keyframes rotatecircle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}


.carousel2 {
  width: 340px;
  margin: -15px auto;
  height: 210px;
  padding: 5px;
  -webkit-perspective: 370px;
  perspective: 370px;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.carousel2>* {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}

.carousel2 figure {
  margin: 0 auto;
  width: 170px;
  height: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform-origin: 50% 50% -482.8427124746px;
  transform-origin: 50% 50% -482.8427124746px;
}

.carousel2 figure img {
  width: 100%;
  height: auto;
  object-fit: fill;
  box-sizing: border-box;
  padding: 0 20px;
  opacity: 0.9;
  border-radius: 26px;
  background: #eeeeee;
  box-shadow: inset 14px -14px 28px #a9a9a9, inset -14px 14px 28px #ffffff;
}

.carousel2 figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 50% -482.8427124746px;
  transform-origin: 50% 50% -482.8427124746px;
}

.carousel2 figure img:nth-child(2) {
  -webkit-transform: rotateY(0.7853981634rad);
  transform: rotateY(0.7853981634rad);
}

.carousel2 figure img:nth-child(3) {
  -webkit-transform: rotateY(1.5707963268rad);
  transform: rotateY(1.5707963268rad);
}

.carousel2 figure img:nth-child(4) {
  -webkit-transform: rotateY(2.3561944902rad);
  transform: rotateY(2.3561944902rad);
}

.carousel2 figure img:nth-child(5) {
  -webkit-transform: rotateY(3.1415926536rad);
  transform: rotateY(3.1415926536rad);
}

.carousel2 figure img:nth-child(6) {
  -webkit-transform: rotateY(3.926990817rad);
  transform: rotateY(3.926990817rad);
}

.carousel2 figure img:nth-child(7) {
  -webkit-transform: rotateY(4.7123889804rad);
  transform: rotateY(4.7123889804rad);
}

.carousel2 figure img:nth-child(8) {
  -webkit-transform: rotateY(5.4977871438rad);
  transform: rotateY(5.4977871438rad);
}

.ctrlbtn {
  width: 50px;
  height: 50px;
  border-radius: 28px;
  background: linear-gradient(45deg, #404040, #363636);
  box-shadow: inset 21px 21px 20px #1e1e1e, -21px 21px 56px #363636;
  border: none;
  color: rgba(219, 219, 219, 0.92);
  margin: 0 auto;
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
}

.ctrlbtn2 {
  width: 50px;
  height: 50px;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow: 5px 5px 20px #b1afaf, -5px -5px 20px #ffffff;
  border: none;
  color: #858585;
  margin: 0 auto;
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
}

#play2 {
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, #ebeaea);
  box-shadow: inset 5px 5px 20px #c7c7c7, inset -5px -5px 20px #ffffff;
}



.btnwrap2 {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 5px 5px 10px #8f8f8f, -5px -5px 10px #ffffff;
  display: flex;
  justify-items: center;
  align-items: center;
  border: 3px solid rgba(131, 130, 136, 0.329);
  margin-right: 1px;
}



.wrap2 {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eeeeee;
  box-shadow: inset 14px -14px 16px #a9a9a9, inset -14px 14px 16px #ffffff;
  display: flex;
  justify-items: center;
  align-items: center;
  border: 1px solid rgba(238, 236, 236, 0.48);
  margin: 5px;
}

#btngroup {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 10px;
}

nav {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
}

.iconimg {
  width: 30px;
  height: 30px;
  opacity: 0.6;
}

.iconimgsmall {
  widows: 25px;
  height: 25px;
  margin-left: -3px;
  opacity: 0.8;
}

.navbtn {
  padding: 5px;
  font-family: 'Acme';
  color: rgb(80, 80, 235);
}

h1 {
  font-family: 'Cairo';
  background: radial-gradient(rgb(236, 78, 184), rgb(87, 175, 235));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.hide {
  display: none;
}

<head>
  <link rel="stylesheet" href="morph.css">
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Acme|Odibee+Sans|Pacifico&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Abel|Dosis|Josefin+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cairo|Exo|Krona+One&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Comfortaa|Montserrat|Trade+Winds&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/00ad4c12e9.js" crossorigin="anonymous"></script>
</head>

<body>
  <h1>SOFT UI</h1>


  <div id="player2">

    <div class="carousel2">
      <figure class="figure2">
        <img src="https://www.billboard.com/files/styles/900_wide/public/media/FKA-Twigs-LP1-album-covers-billboard-1000x1000.jpg" name="Video Girl" alt="FKA Twigs" value="audio2.mp3">
        <img src="https://i.redd.it/oy9e4refcl031.jpg" alt="">

        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSK81amjJYMU9E6qzdZPK0SQKfwfGAy_SoMiiuFijgY6Nw13VNn" alt="">
        <img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/album-cover.png" alt="">
        <img src="https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/99/29/7e/99297eb2-cd14-4417-55d2-cbaf4357f75b/source/1200x1200bb.jpg" alt="">

        <img src="https://www.billboard.com/files/styles/900_wide/public/media/cardi-b-invasion-of-privacy-album-art-2018-billboard-embed.jpg" alt="">
        <img src="https://img2-placeit-net.s3-accelerate.amazonaws.com/uploads/stage/stage_image/39631/optimized_large_thumb_stage.jpg" name="Go Away" alt="Ghaliaa" value="audio4.mp3">
        <img id="img8" src="https://d279m997dpfwgl.cloudfront.net/wp/2018/05/0501_janelle-monae-dirty-computer-1000x1000.jpg" name="Make Me Feel" alt="Janelle Monae" value="Janelle.mp3">
      </figure>

      <nav>
        <div class="wrap2"><button class="navbtn next" style="border-radius: 5px;
            width:40px;height:40px;
           background: #f5f5f5;
           box-shadow:  -5px -5px 20px #cccccc, 
                        inset 5px 5px 10px #e0e0e0;            
           border:none;font-size:22px; ">&lt</button></div>

        <div class="wrap2"><button class="navbtn" style="border-radius: 5px;
         font-size:22px; width:40px;height:40px;
         background: #f5f5f5;
         box-shadow:  -5px -5px 20px #cecece, 
                     inset 5px 5px 10px #e0e0e0;
                      border:none;">&gt</button></div>
      </nav>
    </div>
    <!--album slider-->

    <div id="record">
      <div class="outerCircle2 hide"></div>
      <div class="innerCircle2 hide"></div>
      <div class="icon2"></div>
    </div>

    <div id="playing">
      <h2 id="track2"> </h2>
      <p id="artist2"></p>
    </div>

    <div id="btngroup">
      <div class="btnwrap2"><button class="ctrlbtn2" id="play2"><img class="iconimg" src="https://iconsplace.com/wp-content/uploads/_icons/000000/256/png/play-icon-256.png"></button></div>
      <div class="btnwrap2"><button class="ctrlbtn2" id="pause2"><img class="iconimg" src="https://iconsplace.com/wp-content/uploads/_icons/000000/256/png/pause-icon-256.png"></button></div>
      <div class="btnwrap2"><button class="ctrlbtn2" id="play"><img class="iconimg" src="https://w0.pngwave.com/png/978/183/computer-icons-share-icon-share-button-png-clip-art.png"></button></div>
      <div class="btnwrap2"><button class="ctrlbtn2" id="play"><img class="iconimg" src="https://iconsplace.com/wp-content/uploads/_icons/ff00ff/256/png/hearts-icon-5-256.png"></button></div>
    </div>


    <script src="morph.js"></script>
</body>