Create cookie for audio play/mute setting

Question

I have the following 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>

And the following 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);

Here you can find a JSFiddle.

What this script does is mute and resume playing an audio file that has the background_audio id.

I spent the last day on cookies in JS on SO and Google but can't make things work (not knowing how to debug JS is the main problem I guess).

I need to create a cookie when clicking on the "mute" id. Then I need to verify if the cookie is set or not and, if it's set, assign that value stored in the cookie to audio.muted. If the cookie is not set then it should play the sound.

While I know how to make conditionals and set cookies in PHP, JS is my weakspot and everytime I try something it ends up not working.

How can I modify the script in order to set a cookie or create a session so that when the user mutes the sound on one page it can stay that way on the others as well?

Could you please provide a working example of how it should be done?

Possible duplicate https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript — Asons, Apr 26 '18 at 11:00
Yes, I'm actually sure that the answer to my problem is very similar to the answers in that question. What I fail to be able to do is apply these changes to my case and create a script that remembers the mute settings for each page that you visit. I guess (and hope) this would be a handy script for many people. I don't need the exact answer, just some starting point is fine, I'm willing to experiment just that it will probably involve a bit of patience. — SporeDev, Apr 26 '18 at 11:08

score 1 · Accepted Answer · answered Apr 26 '18 at 17:36

This may not be the most elegant solution, but this is what I came up with. I have commented everything so it should be easy to understand what is going on.

Due to StackOverflow and others having restrictions on setting cookies in code (which is understandable), I have put up a working example here: 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>

I guess that this can be easily adaptable to mute all sounds by replacing the background_audio id with a class and changing document.getElementById to document.getElementByClassName, right? — SporeDev, Apr 27 '18 at 13:11
Yep, in addition to `getElementsByClassName` you would need to loop through it's variable to act on each sound. That would look a little something like this: https://dev.pawdesigns.ca/js-cookies/class.html — Austen Holland, Apr 27 '18 at 16:31

Create cookie for audio play/mute setting

1 Answers1