3

I'm trying to play an audio source when a marker is detected with the A-frame and AR.JS libraries.

Currently I have the following scene, camera, and marker:

  <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;';>
        <a-marker preset="hiro">
                <a-box position='0 0.5 0' material='color: black;'></a-box>
        </a-marker>
        <a-assets>
            <audio id="sound" src="audio.mp3" preload="auto"></audio>
        </a-assets>
    <a-entity sound="src: #sound" autoplay="false"></a-entity>
    <a-entity camera></a-entity>
    </a-scene>

I initially tried the following:

var entity = document.querySelector('[sound]');

      if(document.querySelector("a-marker").object3D.visible == true){
            entity.components.sound.playSound();
            console.log("playing");
        } else {
            entity.components.sound.pauseSound();
            console.log("not playing");
        }

However, it doesn't work. Any ideas as to why this isn't or doesn't work? I'm not even seeing a console log, so it doesn't appear to run either.

Peter Lum
  • 143
  • 4
  • 13

1 Answers1

2

Did you register a component that handle the sound on every tick?

<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-box position='0 0.5 0' material='color: black;' soundhandler> 
                </a-box>
        </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>
jlvaquero
  • 8,571
  • 1
  • 29
  • 45
  • thanks! I did try to register a component but I must've miswrote my code since it didn't execute let alone create any console log. Might have been since I tried writing this in the head as opposed to near the end of the body tag. This worked perfectly. – Peter Lum Apr 26 '18 at 20:58