时间戳

首页 > 解决方案 > 用于将 smil 动画与 svg 中的音频同步的 cat 2 JS

javascript - 用于将 smil 动画与 svg 中的音频同步的 cat 2 JS

问题描述

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

当音频 SVG 动画停止并重新启动时，就会出现问题。两者都应该单击一次，但它没有成功，因为我无法在 javacript 中输入 2 次单击以获取两种状态的 SMIL 动画，暂停和未暂停。

如何连接这两个来源？：（您可以在网站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>

标签： javascriptsvgsynchronizedeventhandlersmil

解决方案

连接两个脚本非常容易，但通常最简单的方法最后出现：

    <script>
        (function () {
  var svg = document.getElementsByTagName('svg')[0],
      txt = document.getElementsByTagName('text')[0];
      audio = null;
  svg.addEventListener('click', handler, false);
  function handler() {
    if (!audio) {
      audio = new Audio('https://arteurope.de/files/Vergessen.mp3');
      audio.play();
  svg.unpauseAnimations();
      txt.innerHTML = 'Stop';
    } else if (audio && audio.paused) {
      audio.play();
svg.unpauseAnimations();
      txt.innerHTML = 'Stop';
    } else {
      audio.pause();
svg.pauseAnimations();
      txt.innerHTML = 'Play';
    }
  }
})();
    </script>

您只将动画动作放入音频脚本中。下面是一个片段：

<!DOCTYPE html>
<html>
<title>musicsite</title>
<head>
</head>
<body>
<svg
   width="400"
   height="600"
   opacity="1"
   id="svg1">
  <defs id="defs4" >
  <animate
       xlink:href="#svg1"
       id="tv1"
       attributeName="opacity"
       from="1"
       to="1"
       dur="1s"
       begin="click"
       restart="never"
       fill="freeze" />
<animateTransform
       xlink:href="#svg1"
       id="scroll1"
       type="translate"
       attributeName="transform"
       begin="tv1.end+4s"
       dur="2s"
       from="0,0"
       to="0,-520"
       fill="freeze" />
<animateTransform
       xlink:href="#svg1"
       id="scroll2"
       type="translate"
       attributeName="transform"
       begin="scroll1.end+4s"
       dur="2s"
       from="0,-520"
       to="0,0"
       fill="freeze" />
<animateTransform
       xlink:href="#button1"
       id="zoom"
       attributeName="transform"
       type="scale"
       transform="scale(2, 2)"
       values="1; 2"
       begin="scroll2.end+4s"
       dur="2s"
       fill="freeze" />
   </defs>

  <g
     id="layer1">
    <rect
       width="400"
       height="250"
       x="200"
       y="115"
       id="rect0"
       style="color:#000000;fill:#e9b96e;fill-opacity:0.34645673;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.9496063;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
    <rect
       width="400"
       height="160"
       x="200"
       y="550"
       id="rect1"
       style="color:#000000;fill:#ef2929;fill-opacity:0.34645673;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.9496063;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
    <rect
       width="100"
       height="100"
       x="200"
       y="800"
       id="rect2"
       style="color:#000000;fill:#729fcf;fill-opacity:0.34645673;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.9496063;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
    <rect
       width="100"
       height="100"
       x="500"
       y="800"
       id="rect3"
       style="color:#000000;fill:#204a87;fill-opacity:0.34645673;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.9496063;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
  </g>
<g id="button1" opacity="1" transform="translate(10 10)">
  <rect x="20" y="20" rx="20" ry="20" width="100" transform="(1,1)" height="100" id="buttonrect" style="fill:red;stroke:black;stroke-width:5;" />
  <text x="51" y="75" fill="black">Play</text>
</g>
</svg>
 <script>
        (function () {
  var svg = document.getElementsByTagName('svg')[0],
      txt = document.getElementsByTagName('text')[0];
      audio = null;

  svg.addEventListener('click', handler, false);

  function handler() {
    if (!audio) {
      audio = new Audio('https://arteurope.de/files/Vergessen.mp3');
      audio.play();
  svg.unpauseAnimations();
      txt.innerHTML = 'Stop';
    } else if (audio && audio.paused) {
      audio.play();

svg.unpauseAnimations();
      txt.innerHTML = 'Stop';
    } else {
      audio.pause();
svg.pauseAnimations();
      txt.innerHTML = 'Play';
    }
  }
})();
    </script>  
</body>
</html>

推荐阅读