需要用JS静音和改变图像

Posted 2023-02-25

【中文标题】需要用JS静音和改变图像

【英文标题】：Need to mute audio and change image with JS

【发布时间】：2013-12-30 10:35:39

【问题描述】：

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

<div id="bgAudioControls">

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

【问题讨论】：

或者，使用 JS 变量来记住静音状态并相应地切换音频，不要依赖某些 DOM 属性。

【参考方案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"    />
    </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";
        
        );
);

【讨论】：

我已经做到了，但是如何让我通过单击一个图像来切换图标和音频？这里有一个简单的示例：arc.adamroper.com 我想单击扬声器图标，这将使音频静音并更改图标。然后，再次单击将取消静音并将图标变回。

我可以让它静音/取消静音 - 但只能作为两个不同的按钮。我想用一个 onClick 事件来改变图标和静音状态。

您正在处理您提供的链接吗？这个：arc.adamroper.com我没有看到源代码没有变化..

我正在使用本地网络服务器。我刚刚上传了我正在摆弄的版本。 IE;试图让这两个按钮作为一个开关工作。

我刚刚将 onclick 事件添加到图像中 - 暂时。

【参考方案2】：

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

【讨论】：

我刚刚更新了上面的代码。该页面可以在arc.adamroper.com查看