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

Posted 2023-02-24

【中文标题】使用 jquery 记住背景音乐的音量/静音选项

【英文标题】：Remembering volume/mute option for background music using jquery

【发布时间】：2014-05-11 13:32:29

【问题描述】：

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

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

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

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

【问题讨论】：

您好，“它是真的”是什么意思？你的意思是“可能”吗？

如果你愿意，你可以为one session这样做

您需要 cookie 来记住浏览器中的静音状态

【参考方案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");
        
    );
);