title: Playing audio on page load and pausing it onClick
body: <p>I am creating a page, which onload, plays the audio and when the user is listening to the track, they can pause it whenever they want to on click.</p>
  
  <p>Below is my code.</p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"&gt;&lt;/audio&gt;
  &lt;a class="soundIcnPlay" title="button" id="button"&gt;&amp;nbsp;&lt;/a&gt;
  </code></pre>
  
  <p><strong>The jQuery Code:</strong></p>
  
  <pre><code>$(document).ready(function() {
      var playing = false;
  
      $('a#button').click(function() {
          $(this).toggleClass("down");
  
          if (playing == false) {
              document.getElementById('player').play();
              playing = true;
              $(this).removeClass('soundIcnPlay');
              $(this).addClass('soundIcnPause');
  
          } else {
              document.getElementById('player').pause();
              playing = false;
              $(this).removeClass('soundIcnPause');
              $(this).addClass('soundIcnPlay');
          }
  
  
      });
  });
  </code></pre>
  
  <p><strong>The CSS:</strong></p>
  
  <pre><code>.soundIcnPlay {
      background: none repeat scroll 0 0 red;
      cursor: pointer;
      display: block;
      height: 100px;
      width: 100px;
  }
  
  .soundIcnPause {
      background: none repeat scroll 0 0 blue;
      cursor: pointer;
      display: block;
      height: 100px;
      width: 100px;
  }
  </code></pre>
  
  <p><strong>The jsFiddle Link:</strong></p>
  
  <p><strong><a href="http://jsfiddle.net/EdHK6/" rel="nofollow">Live jsFiddle Demo</a></strong></p>
  
  <p>What I have done is created a play effect onclick and similar pause effect on it.
  I need to reverse it by making the audio play on page load and should pause on click and resume when clicked again.</p>