Play audio ONCE on marker detection A-frame & Ar.js

user_16215943 0
Viewed 296

I'm trying to play a sound just once when a marker is detected with the A-frame and AR.JS libraries.

I'm trying the code lines below but the sound is playing indefinite.

<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;';>
     <a-assets>
         <audio id="sound" src="audio.mp3" preload="auto"></audio>
     </a-assets>
     <a-marker preset="hiro">
                <a-entity id="examplemodel" gltf-model="./models/Example.glb" soundhandler></a-entity>
     </a-marker>
     <a-entity sound="src: #sound" autoplay="false"></a-entity>
     <a-entity camera></a-entity>
</a-scene>

<script>
AFRAME.registerComponent('soundhandler', {
    tick: function () {
         var entity = document.querySelector('[sound]');
         if (document.querySelector('a-marker').object3D.visible == true) {
             entity.components.sound.playSound();
         } else {
             entity.components.sound.pauseSound();
         }
    }
});
</script>

When I changed tick for init I got this error:

Uncaught TypeError: Cannot read property 'playSound' of undefined

Could you please give me some ideas to solve this issue?

ar.js aframe three.js audio javascript
1 Answers

It's playing indefinetely, because once it's visible - on each render loop you call playSound().

If you add a simple toggle check - You'll get your "once per visible" result:

tick: function() {
  // marker is the object3D of marker
  if (marker.visible && !this.markervisible) {
    // do your stuff here once per visible
    this.markervisible = true;
  } else if (!marker.visible) {
    this.markervisible = false;
  }
}

Check it out here

user_24257870
Related