如何将我的音频文件分配给我的静音/取消静音切换按钮？

Question

这是我之前未回答的问题的更详细版本： https://stackoverflow.com/questions/26076274/html-css-toggle-mute-with-picture-assignment-button

我需要一些 CSS/html5 脚本方面的帮助。你看，我有一个非常酷的按钮，可以静音/取消静音，按钮本身在两张图片之间切换（一张用于静音，一张用于取消静音。你知道，基本的静音/取消静音扬声器图标）取决于它的当前状态.唯一的问题是我不知道如何使这个按钮起作用。该按钮完美地显示在我的页面和所有内容上，当我单击它时，图片会按预期更改，但我的曲目仍在播放。我已经知道问题是什么了。你看，我不知道如何将此按钮分配给我的音频文件。音频本身有很多属性（自动播放、循环播放、显示：无等），所以我不知道在我的脚本中放置它的位置。 该按钮的脚本是在以前的 StackExhange 线程中找到的（Jaka Dirnbek 的回答）： How to create a only mute/unmute button (like youtube) in html 而这个问题的提问者只要求按钮，而不是音频设置，这就是我卡住的地方。

我将音频源放在哪里？

在头脑中？还是在体内？以及如何编写我的音频代码？我的音频目前有以下脚本：

<audio id="track" src="Poopsyflop.wav" loop="loop" autoplay="autoplay" div style="display:none">

¨

如果有人有任何想法，我很想听听他们的意见:) 提前致谢！

-丹尼尔

Answer 1

您使用音频文件 ID 分配它

演示http://jsfiddle.net/mattball/sVwXH/

HTML

// audio file
<audio id="background_audio" autoplay="autoplay">
  <source src="http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" />
</audio> 

// button
<a href="#noscroll" id="mute">toggle sound</a>

JS

var audio = document.getElementById('background_audio');

document.getElementById('mute').addEventListener('click', function (e)
{
    e = e || window.event;
    audio.muted = !audio.muted;
    e.preventDefault();
}, false);

这是基于一个可以通过各种来源在线获得的示例。

Answer 2

看看here。

例子：

.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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio id="track" autoplay="autoplay" loop="loop">
        <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg" />
    </audio> 
    
<div class='unmute' onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>