Создать 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.

Я провел последний день в файлах cookie в JS для SO и Google, но не могу заставить их работать (я полагаю, не знаю, как отлаживать JS).

Мне нужно создать куки при нажатии на "mute" идентификатор. Затем мне нужно проверить, установлен ли файл cookie или нет, и, если он установлен, назначить это значение, сохраненное в файле cookie, на audio.muted. Если cookie не установлен, он должен воспроизводить звук.

Хотя я знаю, как создавать условные выражения и устанавливать файлы cookie в PHP, 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>