cat 2 JS for synchronising smil-animation with audio in svg

user_15915371 0
Viewed 113

I use a html5 CMS template in which I also want to integrate SVG animations. An audio file is linked to a SMIL animation. This could only be solved with javascript.

The problem arises when the audio SVG animation is stopped and started again. Both should go with one click, but it doesn't succeed, because I can't enter 2 times click in the javacript for the SMIL animation for both states, paused and unpaused.

How can I concatenate this both sources?: (You can see it on the site arteurope.de, you have to click on the button)

I need to put

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

into

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

But then the animation doesn`t start, because the "click" of first function says: unpauseAnimation, and the second function says: 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>
eventhandler smil synchronized svg javascript
1 Answers

It was very easy to connect both scripts, but often the easiest way comes at last:

    <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>

You have only put the animationaction into the audioscript. Below a snippet:

<!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>

user_159153710
Related