用于同步 smil-animation 与 svg 中的音频的 cat 2 JS

问题描述

我使用 html5 CMS 模板，我也想在其中集成 SVG 动画。音频文件链接到 SMIL 动画。这只能用javascript解决。

音频SVG动画停止并再次启动时出现问题。两者都应该一键点击，但它没有成功，因为我无法在 javacript 中为 SMIL 动画输入 2 次点击，用于两种状态，暂停和未暂停。

如何将这两个来源连接起来？： （您可以在网站 arteurope.de 上看到它，您必须点击按钮）

我需要放

    svg.addEventListener("mouSEOut",function() {
      svg.pauseAnimations();

进入

    svg.addEventListener("click",function() {
      svg.pauseAnimations();

但是动画没有开始，因为第一个函数的“点击”是：unpauseAnimation，第二个函数是：pauseAnimation。

 <script type="text/javascript">
        (function () {var svg = document.getElementsByTagName('svg')[0],audio = null;
  svg.addEventListener('click',handler,false);
  function handler() {
    if (!audio) {
      audio = new Audio('https://arteurope.de/files/Vergessen.mp3');
      audio.play();

    } else if (audio && audio.paused) {
      audio.play();

    } else {
      audio.pause();

    }
  }
})();
    </script>
<script type="text/javascript">
        var svg = document.querySelector(".svg-gears");
svg.pauseAnimations();

svg.addEventListener("click",function() {
  svg.unpauseAnimations();
});

svg.addEventListener("mouSEOut",function() {
  svg.pauseAnimations();
});
    </script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）