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 播放器。那么，要回答你的问题，你需要检查他们的文档，看看是否有一个事件你可以在歌曲结束后使用 'fires'。

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

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

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

Jimdo：当 SoundCloud-Player 歌曲结束时停止动画

Jimdo: Stop animation when SoundCloud-Player song is over

html

javascript

css

jquery

soundcloud