2 Replies Latest reply on Mar 17, 2016 12:54 PM by ClayUUID

    HTML5 canvas

    danielh96350507 Level 1

      So it seems there is not a simple way to just pause and resume a timeline including audio on an HTML5 canvas

       

      I have some elements on an HTML canvas. I have some timed animation with javascript on the timeline and I am playing the audio on the timeline...

       

      So far I have the ability to pause and resume the main timeline. The audio does not pause. I want to keep the audio in-sync with the timeline. Is there no method in createJS to control the timeline? I tried setPaused on ticker and that does nothing. I have tried pausing the audio as well as the timeline in two separate calls, but I cannot get the audio to resume. Seems like a big miss to not include control over this. I want a method that doesn't feel sloppy. Any help is appreciated.

        • 1. Re: HTML5 canvas
          Colin Holgate MVP & Adobe Community Professional

          Making the animation stay in sync with the audio is one issue, being able to pause both is another one.

           

          Here's an approach for keeping the timeline in sync:

           

          var starttime = createjs.Ticker.getTime();

          createjs.Ticker.setFPS(24);

          this.removeEventListener("tick", movealong);

          this.addEventListener("tick", movealong);

          self = this;

          this.stop();

           

          function movealong() {

            var now = createjs.Ticker.getTime();

            var f = Math.floor((now - starttime)/1000*24);

            self.gotoAndStop(f);

          }

           

          If you come to the end, or want to do a pause, you would stop the tick listener and reset starttime when you play again.

           

          For the sound, you can do createjs.Sound.stop(); to stop it, to play it again you can give a starttime value.

           

          But that's something I haven't yet done. Look up the SoundJS documentation to see how the starttime property is used.

          1 person found this helpful
          • 2. Re: HTML5 canvas
            ClayUUID Adobe Community Professional

            The last time I looked into it, it seemed that starting a sound at a specific time index can have issues with some browsers and server configurations.

             

            HTMLMediaElement.currentTime - Web APIs | MDN

             

            https://www.google.com/search?q=html5+audio+currenttime+not+working

            1 person found this helpful