title: Remembering volume/mute option for background music using jquery
body: <p>I'm using the following script for playing background music on a web page.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(function()
      {
          var bgMusic = $('#audio-bg')[0],
              playing = true;
  
          bgMusic.addEventListener('ended', function() {
              this.currentTime = 0;
              if (playing) {
                  this.play();
              }
          }, false);
  
          bgMusic.play();
  
          $('#toggle').click(function() {
              if (!bgMusic.paused) {
                  bgMusic.pause();
                  playing = false;
                  $(this).css({backgroundPosition: '0 -21px'})
              } else {
                  bgMusic.play();
                  playing = true;
                  $(this).css({backgroundPosition: '0 0'})
              }
          });
      });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;audio id="audio-bg"&gt;
      &lt;source src="music/Something_for_Nothing_OST_-_Close_darkness_The.mp3"&gt;Update your browser for playing music&lt;/source&gt;
  &lt;/audio&gt;
  &lt;a id="toggle" class="volume-icon" href="javascript:"&gt;Toggle&lt;/a&gt;
  </code></pre>
  
  <p>The music plays and the toggle button works, but is it possible to let pages remember the user's mute/volume preference? For example: I visit the site, music will start playing automatically. I click the mute button to turn off the music, but if I refresh or go to the next page, the music will start playing again. </p>
  
  <p>How can I make the website remember the user's volume/mute preference?</p>