html 动画完成时停止音频

gudnpqoy 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(151)

当我所有的动画都完成后，我希望音频停止。目前，音频在延迟数秒后开始，也在特定的设置时间后结束。
我的方法是在javascript中使用setTimeout函数，在一段时间后停止（暂停）播放音频，这个时间是通过对项目中所有动画计时手动输入的，它在104秒后停止播放音乐。
该动画

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  z-index: 2;
  animation: logo 10s ease-out 9s;
  animation-play-state: paused;
  display: none;
}

@keyframes logo {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2);
  }
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
}

#logo img {
  width: inherit;
}

这是JS

setTimeout(function () {
    musicElement.play();
    console.log("Audio played now, when the Star Wars logo flies in");
  }, 8400);

setTimeout在另一个函数中。

Html

来源：https://stackoverflow.com/questions/74788553/stopping-audio-when-an-animation-is-done

1条答案

按热度按时间

smdnsysy1#

要在动画完成时停止音频，可以使用JavaScript中的animationend事件。此事件在CSS动画完成时触发。可以使用此事件在动画完成时暂停音频。
下面是一个示例，说明如何执行此操作：

// Get a reference to the logo element
const logoElement = document.getElementById('logo');

// Listen for the animationend event on the logo element
logoElement.addEventListener('animationend', function() {
  // When the animation is done, pause the audio
  musicElement.pause();
});

还可以使用onanimationend属性附加事件侦听器，如下所示：

logoElement.onanimationend = function() {
  musicElement.pause();
};

这将允许您在动画完成时停止音频

赞(0）回复(0）举报 2022-12-16

我来回答

html 动画完成时停止音频

1条答案

相关问题

热门标签

最新问答