title: sync external audio with html canvas animation
body: <p>long story short, i want an html canvas animation to behave like a video, I want to add play/pause button and skip forward or backward buttons that jump number of frames/seconds.
  the problem is this, if I imported the audio into animate cc timeline, when the user hit pause and then play the audio won't play with the animation (as the audio only plays if the play head scrubed the first frame of the audio)</p>
  
  <p>so I'm thinking of creating buttons, in the javascript of the canvas or in the html side, that have double functions, so for example the play button will have a function to play the animation and a function to play external audio in the html file</p>
  
  <p>any idea how to do the double function button, and put it either with canvas script or with html?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.playBtn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));
  
  function fl_ClickToGoToAndPlayFromFrame()
  {
   this.gotoAndPlay(2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="authoring-tool" content="Adobe_Animate_CC"&gt;
  &lt;title&gt;2&lt;/title&gt;
  &lt;!-- write your code here --&gt;
  &lt;script src="createjs.min.js"&gt;&lt;/script&gt;
  &lt;script src="2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="init();" style="margin:0px;"&gt;
   &lt;div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1366px; height:768px"&gt;
    &lt;canvas id="canvas" width="1366" height="768" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"&gt;&lt;/canvas&gt;
    &lt;div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1366px; height:768px; position: absolute; left: 0px; top: 0px; display: block;"&gt;
    &lt;/div&gt;
      &lt;div&gt;
       &lt;audio&gt;
    &lt;source src="external audio.mp3" type="audio/mpeg"&gt;
  &lt;/audio&gt; 
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>