Question

使用onclick点击SVG元素时，我必须播放声音。

setter

我一直在撕扯我的头发，使用与上面相同的结构暂停/停止音频播放。

有人能帮忙吗？

如果是这样，我将不胜感激。

感谢。

Answer 1

以下是一个例子：

(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://www.gnu.org/music/FreeSWSong.ogg');
      audio.play();
      txt.innerHTML = 'Stop';
    } else if (audio && audio.paused) {
      audio.play();
      txt.innerHTML = 'Stop';
    } else {
      audio.pause();
      txt.innerHTML = 'Play';
    }
  }
})();

text {
  font-variant: small-caps;
}

<svg width="200" height="200">
  <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:red;stroke:black;stroke-width:5;" />
  <text x="51" y="75" fill="black">Play</text>
</svg>

单击SVG元素时，如何暂停/停止音频播放？

1 个答案: