Question

这恰好是我的HTML，jQuery和CSS代码。但是点击图像不会使音频静音！

HTML代码

<audio autoplay loop preload="auto">
    <source src="assets/music/GoGoRhapsody.m4a" type="audio/mpeg">
</audio>

<div id="sound"></div>

jQuery代码

jQuery('#sound').click(function(){
    if (jQuery(this).attr("class") == "muted") {
        jQuery(this).removeClass("muted");
        jQuery('audio').removeAttr("muted");
    }else{
        jQuery(this).addClass("muted");
        jQuery('audio').attr("muted", "muted");
    }
});

CSS代码

#sound{
    position: absolute;
    top: 2%;
    right: 2%;
    width: 2%;
    height: 3%;
    background-image: url(img/mute.png);
}
.muted{
    background-image: url(img/sound.png);
    width: 1%;
}

Answer 1

我曾在网站上做过一次：

$(".sound").on('click', function(){
    if ($('#player audio').get(0).muted) {
        $('#player audio').get(0).muted = false;
    } else {
        $('#player audio').get(0).muted = true;
    }
});

应该和你一起正常工作。

Answer 2

使用.prop()，将 true / false 传递给静音/取消静音

jQuery('audio').prop("muted", true/false);

DEMO

完整代码

jQuery('#sound').click(function(){
    if (jQuery(this).hasClass("muted")) {
        jQuery(this).removeClass("muted");
        jQuery('audio').prop("muted", false);
    }else{
        jQuery(this).addClass("muted");
        jQuery('audio').prop("muted", true);
    }
});

此外，您应该使用hasClass()，它确定是否为任何匹配的元素分配了给定的类。

使音频静音不起作用

2 个答案: