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

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

1 个答案:

HTML

的Javascript