时间戳

首页 > 解决方案 > 音频静音-取消静音图标

javascript - 音频静音-取消静音图标

问题描述

我想制作一个图标，让您静音或取消静音。图标本身有效，但无法播放音频。这是代码：

<audio id="myaudio" controls loop>
  <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png" 
            style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()"  />
</p>
<script language="javascript">
    
function changeImage() {
var x = document.getElementById("myAudio");
        if (document.getElementById("imgClickAndChange").src == "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png") 
        {
            document.getElementById("imgClickAndChange").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
             x.play();
 }
        else 
        {
            document.getElementById("imgClickAndChange").src = "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
        x.pause();
}
    }
</script>

谁能帮我？

（也是的，我正在使用 w3schools 的声音）

标签： javascripthtmlhtml5-audio

解决方案

x.muted 是解决方案：

function changeImage() {
    var x = document.getElementById("myaudio");
    if (
        document.getElementById("imgClickAndChange").src ==
        "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"
    ) {
        document.getElementById("imgClickAndChange").src =
            "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
        
        x.muted = true;
    } else {
        document.getElementById("imgClickAndChange").src =
            "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
        
        
        x.muted = false;
    }
}
<audio id="myaudio" controls loop>
  <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<img src="https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png" 
            style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()"  />
</p>

推荐阅读