title: Muting / Unmuting HTML5 Audio with jQuery
body: <p>I am making custom controls to "play" and "mute / unmute" an HTML5 audio element.</p>
  
  <p>The following code works as expected in Chrome:</p>
  
  <pre><code>$( document ).ready(function() {
  var audioPlayer;
  
  function init(){
      audioPlayer = $('audio')[0];
  }
  
  function startPlaying(){
      $('button#play').hide();
      audioPlayer.play();
  }
  
  function toggleMute(){
      if(audioPlayer.muted == false){ 
          audioPlayer.muted = true;
          $('button#mute').addClass('muted');
      }
      else{ 
          audioPlayer.muted = false;
          $('button#mute').removeClass('muted');
      }
  }
  
  init();
  $('button#play').on('click', startPlaying );
  $('button#mute').on('click', toggleMute );
  </code></pre>
  
  <p>});</p>
  
  <p>However, in mobile Safari (iOS 5), the first tap on the "mute" button will successfully run at least the line</p>
  
  <pre><code>$('button#mute').addClass('muted');
  </code></pre>
  
  <p>, which updates the icon image, but it doesn't actually mute the audio. Subsequent taps on the "mute" button do nothing (don't mute / unmute the audio or seem to change the class).</p>
  
  <p>How can I get this mute/unmute toggle to work in mobile Safari?</p>
  
  <p><a href="http://jsfiddle.net/mrengy/wCXGv/1/" rel="nofollow">JS Fiddle</a></p>