jQuery音频淡出和暂停，单击淡入音频并恢复播放

Question

jQuery音频淡出和暂停，单击淡入音频并恢复播放

4

这里的问题是什么？当我点击#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>

- viksra

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ionică Bizău · Accepted Answer

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

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

当您单击按钮时，声音将使用fadeIn静音或取消静音。

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