jQuery cookie - audio

Question

Wrote a working code to enable / disable the sound, but do not know how to write to him cookie.

Please help me.

HTML

<div class="uk-icon-volume-up" id="js_playerMuted"></div>
<audio id="player" src="audio/thai.mp3" autoplay loop></audio>

jQuery

var audio = $('#player')[0];
audio.volume = 0.05;

$('#js_playerMuted').toggle(function(){
    $('#player')[0].pause();
    $('#js_playerMuted').css({'color': '#9D9A9A'});
    },
    function() {
    $('#player')[0].play();
    $('#js_playerMuted').css({'color': '#fff'});
}); 

Answer 1

Since you are using JQuery, you'll enjoy using JQuery Cookies (http://www.electrictoolbox.com/jquery-cookies/). Note that you will have to download plugin for that. You can do it there: https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js

If you don't want to download a plugin, you can use any another way to set and get cookies. This link can help you to choose: How do I create and read a value from cookie?

Using JQuery Cookies, you'll need to change your code like that:

var audio = $('#player')[0];
audio.volume = 0.05;

var isMuted = $.cookie('playerMuted'); // Receive stored cookie
if(isMuted) // If should be muted, stop the player
{
  $('#player')[0].pause();
  $('#js_playerMuted').css({'color': '#9D9A9A'});
}

// This function will be called when you click on $('#js_playerMuted')
function toggleMute() 
{
  if(isMuted) // If player is muted, then unmute it
  {
    $('#player')[0].play();
    $('#js_playerMuted').css({'color': '#fff'});
    isMuted = false;
  } else // Else mute it
  {
    $('#player')[0].pause();
    $('#js_playerMuted').css({'color': '#9D9A9A'});
    isMuted = true;
  }
  $.cookie('playerMuted', isMuted); // Save current state of player
}

$('#js_playerMuted').click(toggleMute);