javascript - 创建用于音频播放/静音设置的cookie

Question

我有以下 HTML:

<audio autoplay id="background_audio">
  <source src="https://sporedev.ro/pleiade/hol.mp3" type="audio/mpeg">
</audio>

<a href="#" id="mute">Play/mute sound</a>

以及以下 JS:

var audio = document.getElementById('background_audio');

document.getElementById('mute').addEventListener('click', function (e)
{
    e = e || window.event;
    audio.muted = !audio.muted;
    e.preventDefault();
}, false);

在这里您可以找到JSFiddle .

此脚本的作用是静音并恢复播放具有 background_audio id 的音频文件。

我在SO和Google上花了最后一天的时间来研究JS中的cookie，但无法使事情正常工作(我猜不知道如何调试JS是主要问题)。

我需要在单击“静音”id 时创建一个 cookie。然后我需要验证 cookie 是否已设置，如果已设置，则将 cookie 中存储的值分配给audio.muted。如果未设置 cookie，则应播放声音。

虽然我知道如何在 PHP 中创建条件并设置 cookie，但 JS 是我的弱点，每次我尝试某些东西时都会以失败告终。

如何修改脚本以设置 cookie 或创建 session ，以便当用户在一个页面上静音时，它也可以在其他页面上保持这种状态？

您能否提供一个可行的示例来说明如何完成此操作？

Answer 1

这可能不是最优雅的解决方案，但这就是我想出的。我已经评论了所有内容，因此应该很容易理解发生了什么。

由于 StackOverflow 和其他人对在代码中设置 cookie 有限制(这是可以理解的)，我在这里提供了一个工作示例:https://dev.pawdesigns.ca/js-cookies/

//Get audio element.
var audio = document.getElementById("background_audio");

//Get current time/date.
var date = new Date();
date.setTime(+ date + (1 * 24 * 60 * 60 * 1000)); // _days_ * hours/day *  mins/hour * sec/min * ms/s (Change first number to change how many days cookie is valid for)

//Check if mute cookie exists.
if (document.cookie.indexOf("mute=") == -1) {
    //It does not, lets create it!
    document.cookie = "mute=" + false + ";expires=" + date.toGMTString() + "; path=/";
    //Start playing audio!
    audio.play();
} else {
    //Check if mute cookie is set to false.
    if (getCookie("mute") == "false") {
        //It is, lets play!
        audio.play();
    }
}

function getCookie(name) {
    // getCookie function by Chirp Internet: www.chirp.com.au
    var re = new RegExp(name + "=([^;]+)");
    var value = re.exec(document.cookie);
    return value != null ? unescape(value[1]) : null;
}

//On play/mute button/link click.
document.getElementById("mute").addEventListener("click",function(e) {
    e = e || window.event;
    if (getCookie("mute") == "false") {
        //If mute cookie is set to false, mute audio.
        audio.muted = true;
    } else {
        //If mute cookie is set to true, unmute audio.
        audio.muted = false;
        //Check if audio has been started before.
        if (audio.paused || audio.currentTime > 0) {
            //It has not, lets play it!
            audio.play();
        }
    }
    //Set/update mute cookie with new audio muted value.
    document.cookie = "mute=" + audio.muted + ";expires=" + date.toGMTString() + "; path=/";
    e.preventDefault();
}, false);

<audio id="background_audio">
    <source src="https://sporedev.ro/pleiade/hol.mp3" type="audio/mpeg">
</audio>

<a href="#" id="mute">Play/mute sound</a>