创建用于音频播放/静音设置的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中度过了最后一天，但无法使事情起作用(不知道如何调试JS是我猜是主要问题(。

单击" mute" ID时，我需要创建一个cookie。然后，我需要验证是否设置了cookie，如果设置了cookie，则将存储在cookie中的值分配给音频。如果未设置cookie，则应播放声音。

当我知道如何制作有条件并在PHP中设置cookie时，JS是我的弱点，每次尝试某些东西最终都无法正常工作。

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

您能提供一个工作的示例，说明应该如何完成？

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>