为背景音乐添加静音按钮答案

【问题标题】：Adding mute button for background music为背景音乐添加静音按钮
【发布时间】：2014-03-06 17:19:37
【问题描述】：

是的，我知道自动播放的背景音乐绝对是最糟糕的，但尽管我们请求并试图阻止客户在他的网站上播放此音乐，但他不会屈服。最终，这就是他想要的（即没有生意）。

所以无论如何，我已经使用下面的代码添加了背景音乐。它会在打开页面上自动播放，但是我想添加一个静音图标，以便人们能够将其关闭。我不需要任何其他功能，只需要静音。我试图不惜一切代价避免使用 Flash，但如果可能的话，我愿意使用 jQuery。我认为没有 CSS 方法。

我在谷歌上搜索过，但找不到任何我需要的东西，而且我没有音乐和网站方面的经验，因此我们将不胜感激。

<embed name="lostmojo" src="music/atlast.mp3" loop="false" hidden="true" autostart="true">

【问题讨论】：

sankartypo3.wordpress.com/2012/11/17/…
mute and unmute button toggle html5 audio的可能重复

标签： jquery html css

【解决方案1】：

首先，您会使用音频标签而不是嵌入标签。您可以在音频标签上使用 pause 方法。

<audio id="lostmojo" autoplay="autoplay">
    <source src="annoyingsound.mp3" type="audio/mp3">
</audio>

<img src="mute.jpg" onclick="document.getElementById('lostmojo').pause()" />

这次应该可以了 ;)

【讨论】：

完全理解所有这些，但由于某种原因它不起作用。
跨度>

我需要把“embed name="lostmojo”改成其他的吗？

哈哈！喜欢“烦人的声音”考虑将音频文件重命名为。无论如何，这很好用，谢谢你：D 它不会让我为你投票 D：

【解决方案2】：

使用 Jquery：给音频元素一个 id（例如“lostmojo”）：

<embed name="lostmojo" id="lostmojo" src="music/atlast.mp3" loop="false" hidden="true" autostart="true">

然后为静音按钮定义一个带有 id 的 img 标签：

<img src="image.jpg" id="mute"/>

然后使用JQuery：

$("#mute").click(function() {$("#lostmojo").pause();});

【讨论】：

那里应该有一个额外的“=”符号吗？这行让我很困惑：id=src="lostmojo" music/atlast.mp3"
我认为是这样的：

【解决方案3】：

<audio id="lostmojo" autoplay="autoplay">
    <source src="annoyingsound.mp3" type="audio/mp3">
</audio>

<img src="mute.jpg" onclick="document.getElementById('lostmojo').pause()" />

将 mp3 更改为 mpeg。确保你有这些图像和声音。如果那确实有效，请尝试删除 src 末尾的 .mp3

<audio id="lostmojo" autoplay="autoplay">
    <source src="annoyingsound" type="audio/mpeg">
</audio>

<img src="mute.jpg" onclick="document.getElementById('lostmojo').pause()" />

【讨论】：