title: Set html audio play/pause based on a cookie (works only on pause, but not on play)
body: <p>I'm trying to make background audio remember the play/pause state. I have achieved pausing it and storing the pause state in the cookie, so when I go between page one and two it stays paused (vs autoplaying initially on both pages), but when I click play after that and refresh the page, even though the cookie is changing to &quot;false&quot; in the inspector, the audio doesn't play and the div colour doesn't change to green.</p>
  <p>Live demo <a href="https://timcliss.webflow.io/audio-test" rel="nofollow noreferrer">https://timcliss.webflow.io/audio-test</a></p>
  <p><a href="https://codepen.io/dmitry-ra/pen/zYqMozV" rel="nofollow noreferrer">Codepen</a></p>
  <p>Here is the code</p>
  <p><strong>External Scripts</strong></p>
  <pre><code>&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;div&quot; id=&quot;toggle&quot;&gt; PLAY/PAUSE &lt;/div&gt;
  &lt;audio id=&quot;player&quot; src=&quot;https://storage.yandexcloud.net/timcliss/About.mp3&quot; autoplay loop&gt; 
  </code></pre>
     
  <p><strong>CSS</strong></p>
  <pre><code>.div {
  background-color:green;
  height: 50px;
  color: white;
  text-align: center;
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>var audio = $('#player')[0];
  audio.volume = 0.5;
  
  var isMuted = Cookies.get('playerMuted'); // Receive stored cookie
  if(isMuted) // If muted, stop the player
  {
  $('#player')[0].pause();
  $('#toggle').css({'background-color': 'red'});
  } 
  else
  {
  $('#player')[0].play();
  $('#toggle').css({'background-color': 'green'});
  }
  
  // This function will be called when you click the toggle div
  function toggleMute() 
  {
  if(isMuted) // If player is muted, then unmute it
  {
  $('#player')[0].play();
  $('#toggle').css({'background-color': 'green'});
  isMuted = false;
  } else // Else mute it
  {
  $('#player')[0].pause();
  $('#toggle').css({'background-color': 'red'});
  isMuted = true;
  }
  Cookies.set('playerMuted', isMuted); // Save current state of player
  }
  
  $('#toggle').click(toggleMute);
  </code></pre>