title: Using jQuery to control HTML5 audio on a page
body: <p>I have built a simple tour on my website that will be coded using HTML5 animation. It will use sound from the HTML5 audio tag and the tour will be loaded in using jquery.</p>
  
  <p>When the tour is loaded it will start playing the audio and the user can mute the sound by toggling a link. And if they close the tour then the audio is reset!</p>
  
  <p>I have parts of this working but don't seem to be able to properly toggle the music on and off and then stop it completely if they close the tour. Can anyone help?</p>
  
  <pre><code>var sound;
  
              $(document).ready(function ()
              {   
                  sound = $('#soundTour');
  
                  $('.sound a').click(function()
                  {
                      $(this).parents('div').toggleClass('mute');
  
                      if (sound.paused)
                      {
                          sound.play();
                      }
                      else
                      {
                          sound.pause();
                      }
                  });
  
                  $('.showTour').click(function()
                  {
                      $('body').addClass('theatre'); $('#tour').fadeIn('slow', function() {  });
  
                      sound.trigger('play');
                  });
  
                  $('#tour').find('.tourClose').click(function()
                  {
                      $('body').removeClass('theatre'); $('#tour').fadeOut('slow', function() {  });
  
                      sound.currentTime=0;
                      sound.pause();
  
                  });
  
              });
  </code></pre>