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

时间:2013-06-16 15:29:02

标签: javascript audio switch-statement effects

我正在使用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?我不知道如何实现这个目标(初学者)......

1 个答案:

答案 0 :(得分:1)

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

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