Jimdo：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 代码中的小部件使用 SoundCloud Widget API 链接到 iFrame 播放器。因此，要回答您的问题，您需要查看他们的文档，看看是否有一个事件可以在歌曲完成后使用“触发”。

要完成这项工作，我们必须结合两个事件。第一个是READY 事件，第二个是FINISH 事件。我们只能在小部件完全初始化后才能注册完成事件以使其正常工作。如果你跳过它，它将不起作用。以下是两者如何协同工作。歌曲播放完毕后，它会调用stopPlayer()。

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

这是一个基于您的代码的工作示例。 Example on JSFiddle