Воспроизведение больше не будет работать после того, как аудиофайл был приостановлен один раз - PullRequest
Новая
       7

Воспроизведение больше не будет работать после того, как аудиофайл был приостановлен один раз

0 голосов
/ 28 февраля 2020

Попытка сделать следующее:

В моем аудиоплеере, нажав на альбом 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...