Джимдо: остановите анимацию, когда закончится песня SoundCloud-Player

Question

С некоторой помощью мне удалось создать анимацию для проигрывателя SoundCloud.При нажатии кнопки воспроизведения запускается анимация вращающегося диска.Это работает как ожидалось.Также, когда я нажимаю кнопку остановки, анимация останавливается.Когда песня уже воспроизводится, и воспроизведение нажимается на другом проигрывателе, анимация и звук другого проигрывателя останавливаются и проигрыватель, на который нажали, установлен в режим воспроизведения с анимацией.Все это работает правильно.То, что я хотел бы иметь, как я могу остановить анимацию, когда песня закончена?Мои знания JavaScript ограничены, и я не знаю, как это сделать, и на моей странице есть несколько игроков.

Вот мой код до сих пор.

$(function() {
  var activePlayerStartBtn;

  function stopOtherPlayerSetNewAsActive(element) {
    var playerElements = ['', '2'];

    playerElements.forEach(function(el) {
      $('#so' + el).addClass('hide-player');
    });

    $('.bottom-player').removeClass('-move-down');

    var id = '#so' + $(element).parent().data('id');
    console.log('id', id);
    $(id).removeClass('hide-player');

    var toShow = $(element).parent().find('.pp-btn.hide')[0];
    $(element).addClass('hide');
    $(toShow).removeClass('hide');

    var clippedImg = $(element).parent().find('.-clipped')[0];
    $(clippedImg).addClass('-rotating');

    if (activePlayerStartBtn) {
      var stopButton = $(activePlayerStartBtn).parent().find('.pp-btn').not('.hide')[0];
      $(stopButton).addClass('hide');
      $(activePlayerStartBtn).removeClass('hide');

      var priorClippedImg = $(activePlayerStartBtn).parent().find('.-clipped')[0];
      $(priorClippedImg).removeClass('-rotating');
    }
    activePlayerStartBtn = element;
  }

  function stopPlayer(element) {
    $(element).addClass('hide');
    $(activePlayerStartBtn).removeClass('hide');
    $('.bottom-player').addClass('-move-down');

    var clippedImg = $(element).parent().find('.-clipped')[0];
    $(clippedImg).removeClass('-rotating');
    activePlayerStartBtn = null;
  }

  var widget1 = SC.Widget("so");
  $("#playSound").click(function() {
    widget1.play();
    stopOtherPlayerSetNewAsActive("#playSound");
  });

  $("#stopSound").click(function() {
    widget1.pause();
    stopPlayer('#stopSound');
  });

  var widget2 = SC.Widget("so2");

  $("#playSound2").click(function() {
    widget2.play();
    stopOtherPlayerSetNewAsActive("#playSound2");
  });
  $("#stopSound2").click(function() {
    widget2.pause();
    stopPlayer('#stopSound2');
  });
});

.bottom-player {
  left: 0;
  bottom: 0;
  width: 100%;
  position: fixed;
  padding: 20px 0px;
  background-color: #32333b;
  border-top: 3px solid #f70;
  transition: .4s ease-in-out;
}

.-move-down {
  transform: translatey(100%);
  opacity: 0;
}

.hide-player {
  display: none;
}

.hide-play-btn {
  margin-left: -20px;
}

.button-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 200px;
  display: inline-block;
  margin: 4px 5px;
}

.-clipped {
  width: 100%;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
  clip-path: circle(100% at 50% 50%);
  -webkit-clip-path: circle(100% at 50% 50%);
  -moz-transition-delay: -0.4s;
}

.-rotating {
  animation: loading 10s linear infinite;
  -webkit-animation: loading 10s linear infinite;
  clip-path: circle(45% at 50% 50%);
  -webkit-clip-path: circle(45% at 50% 50%);
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
  opacity: .75;
}

.pp-btn {
  position: absolute;
  width: 100%;
  max-width: 60px;
  cursor: pointer;
  transform: translate(-50%, -55%);
  top: 50%;
  left: 50%;
  opacity: .7;
  clip-path: circle(33% at 49.9% 49.5%);
  -webkit-clip-path: circle(33% at 49.9% 49.5%);
}

.hide {
  display: none;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>

<div class="button-wrapper" data-id="">
  <img src="https://i1.sndcdn.com/artworks-000282974765-ufgq02-t500x500.jpg" class="-clipped">

  <img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" onmousedown="return false;" alt="play" title="play" class="pp-btn" name="playSound">
  <img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="pp-btn hide" name="stopSound">
</div>

<div class="button-wrapper" data-id="2">
  <img src="https://i1.sndcdn.com/artworks-000282974765-ufgq02-t500x500.jpg" class="-clipped">

  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="pp-btn" name="playSound">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="pp-btn hide" name="stopSound2">
</div>

<div class="bottom-player -move-down">


  <iframe id="so" class="hide-play-btn hide-player" name="so" frameborder="0" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/381324509&amp;color=%23f70&amp;inverse=true&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
    scrolling="no" height="20" width="100%">
</iframe>

  <iframe id="so2" class="hide-play-btn hide-player" name="so2" frameborder="0" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380275043&amp;color=%23f70&amp;inverse=true&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
    scrolling="no" height="20" width="100%">
</iframe>

</div>

Answer 1

Виджет в вашем коде JavaScript связан с проигрывателем iFrame с помощью SoundCloud Widget API . Итак, чтобы ответить на ваш вопрос, вам нужно проверить их документы и посмотреть, есть ли событие, которое вы можете использовать, которое «срабатывает», как только песня закончится.

Чтобы сделать эту работу, мы должны объединить два события. Первый - это событие READY, а второй - FINISH. Мы можем зарегистрировать событие финиша только после полной инициализации виджета для правильной работы. Если вы пропустите это, это не сработает. Вот как они работают вместе. Как только песня закончилась, она позвонит stopPlayer().

widget1.bind(SC.Widget.Events.READY, function() {
  widget1.bind(SC.Widget.Events.FINISH, function() {
    stopPlayer('#stopSound');
  });
});

Вот рабочий пример, основанный на вашем коде. Пример для JSFiddle