0

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

$(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>

音乐播放并且切换按钮起作用，但是是否可以让页面记住用户的静音/音量偏好？例如：我访问网站，音乐会自动开始播放。我单击静音按钮关闭音乐，但如果我刷新或转到下一页，音乐将重新开始播放。

如何让网站记住用户的音量/静音偏好？

4

1 回答 1

1

使用 cookie。你可以得到一个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");
        }
    });
});
于 2014-05-11T13:48:38.290 回答