静音和取消静音按钮切换html5音频

时间:2011-10-17 19:27:46

标签: javascript html5 audio togglebutton mute

我已经了解了如何通过输入以下代码来静音<audio>声音对象:

<a href="#" onclick="document.getElementById('ambiance').muted = true; return false">
    mute sound
</a>

现在我正在搜索如何使用相同的按钮来设置我的声音静音/取消静音,并选择切换它?

有人可以给我指示吗?

2 个答案:

答案 0 :(得分:7)

var audioElm = document.getElementById('ambiance'); audioElm.muted = !audioElm.muted;

答案 1 :(得分:0)

试试这个:

.unmute {
  background-image: url(http://franriavilla.in/images/unmute.png);
  background-size: cover;
  width: 35px;
  height: 30px;
  cursor: pointer;
}

.mute {
  background-image: url(http://franriavilla.in/images/mute.png);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio id="track" autoplay="autoplay" loop="loop">
    <source src="audio/ThemePackNet.mp3" type="audio/ogg" />
</audio>

<div class='unmute' onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>