通过单击 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) 启用/禁用所有这些音频？

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

edit：我需要将其作为 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();
}