title: Function for pause the whole page
body: <p>I have an output of <strong>Articulate Storyline 3</strong> here but as the whole output of this software is just Javascript and HTML and CSS I won't use storyline tag for this question (we can consider this Javascript question).</p>
  <p>Here is a very simple output I have prepared to ask my question, please have look:</p>
  <p><a href="https://langfox.ir/pause/story_html5.html" rel="nofollow noreferrer">https://langfox.ir/pause/story_html5.html</a></p>
  <p>As you see and hear! there is a SFX playing and a counter which is counting from 1 to end.</p>
  <p>But behind this simple thing we have a beautiful and perhaps complex functionality... What? Here it is:</p>
  <p>Reload the given page and when you see the number <strong>2</strong> (it could be any number) click on another tab in your browser. (so you jump out from the given page without closing it)</p>
  <p>As you see as you click on another tab the <strong>playing sound is paused</strong>. don't go back to the page right away, wait any amount of time and again go back, we expect the counter to show the end right? but as you see <strong>the counter is still in the last position when you left the page</strong> (in our example number <strong>2</strong>) <strong>and the SFX play at the point it paused</strong>.</p>
  <p>How can we do such thing with Javascript?</p>
  <p><strong>I want a function to pause the page when I want?</strong></p>
  <p>How Storyline Engineers did such a thing?</p>
  <p>Here is the files in case anyone wants to have a look:</p>
  <p><a href="https://langfox.ir/pause/Untitled1%20-%20Storyline%20output.zip" rel="nofollow noreferrer">https://langfox.ir/pause/Untitled1%20-%20Storyline%20output.zip</a></p>