jquery - jQuery 音频淡出和暂停，onclick 音频淡入和恢复

Question

这里有什么问题？当我单击 时#background_audio div，音频会淡出然后自动淡入并继续播放，而无需我再次按下按钮。我如何解决它？

我正在尝试使它在单击#background_audio 时音频淡出并暂停，然后#background_audio再次单击时，音频淡入并恢复。

<script type="text/javascript">
$(document).ready(function(){
    $('#mute').click(function(){
        $('#background_audio').animate({volume: 0}, 1000);
        setTimeout(function(){('#background_audio').pause()},1000);
    });
    $('#mute').click(function(){
        $('#background_audio').animate({volume: 1}, 1000);
        setTimeout(function(){('#background_audio').pause()},1000);
    });
});
</script>

Answer 1

您正在向同一个 jQuery 元素添加两个单击处理程序，因此单击两个处理程序将被调用。

您必须添加一个if验证声音是否静音。

当您单击按钮时，声音将通过淡入淡出静音或取消静音。

HTML

<div style="bottom:0; position:absolute; height:32px; width:100%;">
    <button id="mute">Mute sound</button>
    <audio id="background_audio"  src="http://www.noiseaddicts.com/samples/2541.mp3" autoplay="autoplay"></audio>
</div>

Javascript

$(document).ready(function(){
    var backAudio = $('#background_audio');

    var muted = false;

    $('#mute').click(function(){
        var button = $(this);
        if (!muted) {
            button.attr("disabled", "");
            backAudio.animate({volume: 0}, 1000, function () {
                muted = true;
                button.removeAttr("disabled", "");
                button.text("Unmute sound");
            });
        }
        else {
            button.attr("disabled", "");
            backAudio.animate({volume: 1}, 1000, function () {
                muted = false;
                button.removeAttr("disabled", "");
                button.text("Mute sound");
            });
        }
    });
});

JSFIDDLE