A-FrameでARマーカーを認識した時、認識が切れた時にコールバックイベントを設定する 💣

この投稿をInstagramで見る

片付けが捗るように、3秒以上物を置きっぱなしにすると爆発音がする机を作りました。名付けて「かたづくえ」です。 #音楽 #家 #音楽家 #ミュージックハウス #片付け #机

音楽+家=音楽家（ミュージックハウス）(@ongaku.ie)がシェアした投稿 - 2020年11月月11日午前5時51分PST

A-FrameでARマーカーを認識した際、認識が切れた際のコールバックイベントを設定して、3秒以上認識が切れたら爆発音が鳴るARマーカーをつくってみました。

HTML

<script>
  let audio;
  let timer;

  AFRAME.registerComponent('marker', {
    init: function () {
      const marker = this.el;

      marker.addEventListener('markerFound', function () {
        clearTimeout(timer);
        audio.pause();
      });

      marker.addEventListener('markerLost', function () {
        console.log(audio);
        clearTimeout(timer);
        timer = setTimeout(() => {
          audio.currentTime = 0;
          audio.play();
        }, 0);
      });
    }
  });

  window.onload = () => {
    audio = document.getElementById('audio');
  };
</script>
<audio id="audio" src="count.mp3"></audio>
<a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
  <a-marker marker type='pattern' url='./pattern.patt'>
    <a-torus color="red" position="0 .4 0" scale=".4 .4 .4" rotation="90 0 0"></a-torus>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

マーカーに属性を振ると、

AFRAME.registerComponent('属性名', {
  init: function () {
    // 初期化時のイベント
  }
});

と、初期化時のイベントが設定できるようです。
そして、マーカーのmarkerFoundで認識時、markerLostで認識が切れた時のイベントが振れます。

注意事項としてはJavaScriptを書く場所で、いつも通りbodyの一番下に書いたところ、registerComponentのinitイベントが発火しませんでした。
おそらく、scriptタグを評価する前に初期化が終わってしまったことが原因かと思われます。