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 而这个问题的提问者只询问按钮，而不是音频设置，那就是我被困住的地方。

我在哪里放音频src？

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

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

¨

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

-Daniel

Answer 1

您使用音频文件ID

分配它

DEMO 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>

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

2 个答案: