通过单击div -javascript启用/禁用所有声音效果

Question

我正在使用Wordpress构建一个网站，我正在使用div和鼠标事件（onmouseover，onmouseenter和onclick）来处理不同页面上的不同元素。

我把音频和脚本放在页脚中：

<audio id="ef1"><source src="url"/></audio>
<script type="text/javascript">var ef1 = document.getElementById("ef1"); ef1.volume='0.4';</script>

在我想要的任何页面上的任何div内部调用：

onmouseenter="ef1.play();"

我还有加载某些页面的效果。所以不是每个音频都在页脚中。

现在问题是如何一起处理所有这些音频 - 点击一个元素（div）启用/禁用所有这些音频？

拥有一个音量滑块也不会受到伤害，但对我来说启用/禁用功能已经足够了。

编辑：我需要将其作为切换功能，作为div内的onclick事件。我现在所知道的就是：

onclick="ef1.volume='0'; ef2.volume='0'; etc"

这个问题（旁边有很多音频）是刷新或打开其他页面后卷恢复正常。

edit2 ：这就是我要问的甚至可能吗？也许这个onclick事件应该以某种方式“记住”ip地址，或者只是留下cookie？我不知道如何实现这个目标（初学者）......

Answer 1

如果您希望关闭所有 <audio>，则可以使用document.getElementsByTagName('audio')获取它们。它返回一个数组（实际为NodeList），其中包含对页面上所有<audio>的引用。您可以遍历此数组并执行某些操作，例如在每个数组上调用pause()。

var audioElements = document.getElementsByTagName('audio');
for(var i = 0; i < audioElements.length; ++i){
  audioElements[i].pause();
}