Audio player. How to add cookies to JS code?

Question

Made from different pieces of code an audio player in JS. He works great. There are two button positions to turn on the sound and turn off the sound. So when you open another page of the site, the position of the button is always on. How to add a cookie method, if the button should be turned off so that it is remembered and the music does not sound? Help me please.

var radio = new Audio();
radio.src = "https://site.dvasyl.com/wp-content/uploads/2022/05/preview.mp3";
radio.loop = true;
radio.play();

document.querySelector('#muted').onclick = function() {
  if (radio.muted === true) {
   document.querySelector('#muted').innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" />'
    radio.muted = false;
  } else {
    document.querySelector('#muted').innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_off-1.svg" alt="On" />'
    radio.muted = true;
  }  
}

    
    .size_sound_alert{
        width: 30px;
    }
    
.sound_label{
    position: fixed;
    margin-bottom: %;
    margin-left: 95%;
    top: 90%;
    z-index: 9999;
}
    
@media screen and (max-width: 768px) {
    .sound_label {
        position: fixed;
        margin-bottom: %;
        margin-left: 85%;
        top: 90%;
    }
}

<div id="muted" class="sound_label"><img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" /></div>

Answer 1

// add elem to variable for single select from the dom;
const mutedElem = document.getElementById('muted');

var radio = new Audio();
radio.src = "https://site.dvasyl.com/wp-content/uploads/2022/05/preview.mp3";
radio.loop = true;

// you can't play audio without user action
// https://developer.chrome.com/blog/autoplay/
// radio.play();

// get value from localStorage and mute player if we need
if (!!localStorage.getItem('muted')) playerMute();

mutedElem.addEventListener('click', function () {
    // toggle muted param
    if (radio.muted) playerUnmute();
    else playerMute();
})

// mute player function
function playerMute() {
    mutedElem.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_off-1.svg" alt="On" />'
    radio.muted = true;
    localStorage.setItem('muted', 'true');
}

// unmute player function
function playerUnmute() {
    mutedElem.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" />'
    radio.muted = false;
    localStorage.removeItem('muted');
}

body {
  background: gray;
}

<div id="muted" class="sound_label">
  <img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off"/>
</div>

You had better use localStorage like in my answer.

p.s. you can't play audio without user action (please read this doc)

Answer 2

You can set the cookie to whatever you need in your onClick event.

document.cookie adds a cookie to the browser.

<script>

var radio = new Audio();
radio.src = "https://site.dvasyl.com/wp-content/uploads/2022/05/preview.mp3";
radio.loop = true;
let isMuted = document.cookie;
radio.muted = isMuted == "muteCookie" ? true : false;
radio.play();

document.querySelector('#muted').onclick = function() {
  var soundAlert = document.querySelector('#muted');
  if (radio.muted) {
    soundAlert.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" />'
    radio.muted = false;
    document.cookie = "";
  } else {
    soundAlert.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_off-1.svg" alt="On" />'
    radio.muted = true;
    document.cookie = "muteCookie";
  }  
}

</script>

Answer 3

Convert the stored dateTime to epoch while sending in response.

How you can convert dateTime to epoch there are many ways(send dateTime in epoch in response).

Add in your Model

protected $casts = ['datetime_field' => 'timestamp']

add this method in Laravel class from where you are sending response

    protected function toEpoch($datetime )
    {
        if (gettype($datetime) == 'string') {
            $datetime = new DateTime($datetime);
            return Carbon::instance($datetime)->format('U');
        } else if ($datetime instanceof Carbon) {
            return $datetime->format('U');
        } else if ($datetime != null) {
            return Carbon::instance($datetime)->format('U');
        }
      } 
    }

In vue project

{{new Date(epoch*1000)}}