Javascript 需要使用JS静音音频和更改图像

我试图创建一个切换开关的音频，取代图标依赖于状态。这是我的代码（不起作用）：

下面的代码可以工作-虽然是两个按钮，而不是切换

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

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

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

@Stasik说的是：

您必须从
标记中删除
id=“mute”
，然后将其放入
标记中

像这样：

或者，使用一个JS变量来记住静音状态并相应地切换音频，不要依赖于某个DOM属性。我已经这样做了，但是如何通过单击一个图像来切换图标和音频呢？这里有一个简单的例子：我想单击扬声器图标，这将使音频静音并更改图标。然后，再次单击将取消静音并重新更改图标。我可以将其设置为静音/取消静音，但只能设置为两个不同的按钮。我想用一个onClick事件更改图标和静音状态。您正在使用您提供的链接吗？这一个：我看不到源代码有任何变化。我正在使用我的本地Web服务器。我刚刚上传了我正在处理的版本。ie；正在尝试将这两个按钮作为一个切换来工作。我刚刚在图像中添加了onclick事件-现在。我刚刚更新了上面的代码。该页面可在以下位置查看：
<a href="#" onclick="document.getElementById('bgAudio').muted = true;">Mute</a>

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

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

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

$(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";
        }
        });
});