jquery - 使用jQuery记住背景音乐的音量/静音选项

Question

我正在使用以下脚本在网页上播放背景音乐。

$(function()
    {
        var bgMusic = $('#audio-bg')[0],
            playing = true;

        bgMusic.addEventListener('ended', function() {
            this.currentTime = 0;
            if (playing) {
                this.play();
            }
        }, false);

        bgMusic.play();

        $('#toggle').click(function() {
            if (!bgMusic.paused) {
                bgMusic.pause();
                playing = false;
                $(this).css({backgroundPosition: '0 -21px'})
            } else {
                bgMusic.play();
                playing = true;
                $(this).css({backgroundPosition: '0 0'})
            }
        });
    });

<audio id="audio-bg">
    <source src="music/Something_for_Nothing_OST_-_Close_darkness_The.mp3">Update your browser for playing music</source>
</audio>
<a id="toggle" class="volume-icon" href="javascript:">Toggle</a>

音乐播放并且切换按钮起作用，但是是否可以让页面记住用户的静音/音量首选项？例如:我访问该网站，音乐将自动开始播放。我单击静音按钮以关闭音乐，但是如果刷新或进入下一页，音乐将再次开始播放。

如何使网站记住用户的音量/静音首选项？

Answer 1

使用Cookie。你可以得到一个plugin for jquery。这里有一些代码可以帮助您入门:

    var bgMusic = $('#audio-bg')[0],
        playing = true;

    bgMusic.addEventListener('ended', function() {
        this.currentTime = 0;
        if (playing) {
            this.play();
        }
    }, false);

    var cookieValue = $.cookie("forcemute");

    if(cookieValue == undefined){
        bgMusic.play();
    }
    else{
        playing = false;
    }

    $('#toggle').click(function() {
        if (!bgMusic.paused) {
            bgMusic.pause();
            playing = false;
            $(this).css({backgroundPosition: '0 -21px'})

            $.cookie("forcemute", 1);
        } else {
            bgMusic.play();
            playing = true;
            $(this).css({backgroundPosition: '0 0'})

            $.removeCookie("forcemute");
        }
    });
});