需要用JS静音和改变图像

Question

我正在尝试为音频创建一个切换开关，根据状态替换图标。这是我的代码（不起作用）：

<div id="bgAudioControls">

<a href="#" onclick="muteSound()">
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>

<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

</div>


<script language="javascript">
    function muteSound() {

    if (document.getElementById("mute").src == "img/sound-off.svg")
    {
        document.getElementById("unmute").src = "img/sound-on.svg";
        document.getElementById('bgAudio').muted = true;
    }
    else
    {
        document.getElementById("mute").src = "img/sound-off.svg";
        document.getElementById('bgAudio').muted = false;
    }
    }
    </script>

我很肯定我忽略了一些超级简单的东西。任何帮助表示赞赏。

可以在http://arc.adamroper.com查看整个运行代码的实时视图

---

以下代码有效 - 尽管是两个按钮，而不是切换按钮。

<a href="#" onclick="document.getElementById('bgAudio').muted = true;">Mute</a>

<a href="#" onclick="document.getElementById('bgAudio').muted = false;">Unmute</a>

Answer 1

更新：工作FIDDLE

@Stasik 说的是：

你必须把id="mute"从<a>标签中去掉，放到<img>标签中

像这样：

<a href="#"  onclick="muteSound()"><img id="mute" src="img/sound-off.svg" /></a>

更新

播放/暂停试试这个发现here

完整代码

HTML

<div id="bgAudioControls">
    <a href="#" >
        <img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
    </a>

    <audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</div>

JAVASCRIPT

$(function() {
    $("#mute").click(function(e) {
        e.preventDefault();

        var song = $('audio')[0]
        if (song.paused){
            song.play();
            document.getElementById("mute").src = "img/sound-on.svg";
        }else{
            song.pause();
            document.getElementById("mute").src = "img/sound-off.svg";
        }
        });
});

Answer 2

访问 mute 元素的“.src”是不正确的，因为 src 是 mute 元素的子元素的属性。直接将 id="mute" 分配给元素以进行快速修复。