Hooking into aframe-alongpath-component events and state

Question

In the docs for the aframe-alongpath-component it has a section on events and on state.

One of the states is "moveonpath" - The Entity currently moving along the path.

How would I hook into that so that whilst the entity is moving it plays a specific sound?

I'm also not clear from the docs how I could trigger the movement along the path to start in code from elsewhere. It appears to have an event you can listen to "movingstarted" but no play method I can call on the component.

The end goal I am trying to achieve is a rock being flung from a catapult.

When the catapult animation completes I want to trigger to rock the follow along a path for its trajectory and trigger a sound whilst moving and another when it reaches the end of the path (which will be in the ocean).

Answer 1

checking the state is quite simple:

element.is("state");

getting the 'ended' event is even simpler:

element.addEventListener("movingended", (e)=>{})

---

now add the event listener in the init function, and check the state in the tick function in a component:

AFRAME.registerComponent('foo', {
  init: function() {
    this.el.addEventListener("movingended", (e) => {
      console.log("moving ended")
    })
  },
  tick: function() {
    console.log(this.el.is("moveonpath"));
  }
})

and attach the component:

<a-box foo></a-box>

check it out live here.