A-frame pause/play animation mixer

I am wondering how I can use the animation-mixer property of the Aframe extras component to pause/play an animation. I currently have a gltf model of a bird in my scene with an animation. What I'd like to do is when the pause button is clicked, a function is issued and the animation will pause, and when the play function is triggered, the animation will continue from where it left off. How can this be done? Current code:

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
<script>

function pause() {
//pause the animation
}

function play() {

//play the animation
}</script>
<button onclick="pause()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer;">
Pause
</button>
<button onclick="play()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer; margin-left: 50px;">
play
</button>
<a-scene>
  <a-entity gltf-model="https://cdn.glitch.global/815f53ca-b7db-40aa-8843-e718abdfbf6d/scene%20-%202022-01-16T183239.246.glb?v=1642386788500" position="20 0 -35" rotation="0 90 0" scale="0.1 0.1 0.1" animation-mixer="clip:Take 001; loop:10000000000000000000; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

I read about a possible solution posted on github by donmccurdy yet I'm unsure of how I can get this into my code in a way that functions. Link to the post: https://github.com/n5ro/aframe-extras/issues/222

Link to fiddle with code: https://jsfiddle.net/AidanYoung/0eufcg52/7/

Solution 1:

Don's solution is based on changing the timeScale which is used as a scaling factor for playback speed (docs):

// grab the entity reference
const el = document.querySelector("a-entity")
// pause - run at 0 speed
el.setAttribute('animation-mixer', {timeScale: 0});
// play - run at normal speed(1)
el.setAttribute('animation-mixer', {timeScale: 1});

Applied to Your code:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
<script>
  function pause() {
    document.querySelector("a-entity").setAttribute('animation-mixer', {
      timeScale: 0
    });
  }

  function play() {
    document.querySelector("a-entity").setAttribute('animation-mixer', {
      timeScale: 1
    });
  }
</script>
<button onclick="pause()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer;">
Pause
</button>
<button onclick="play()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer; margin-left: 50px;">
play
</button>
<a-scene>
  <a-entity gltf-model="https://cdn.glitch.global/815f53ca-b7db-40aa-8843-e718abdfbf6d/scene%20-%202022-01-16T183239.246.glb?v=1642386788500" position="20 0 -35" rotation="0 90 0" scale="0.1 0.1 0.1" animation-mixer="clip:Take 001; loop:true; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

Model by NORBERTO-3D(CC Attribution)