在标记检测 A 帧 AR.JS 上播放音频答案

【问题标题】：Play audio on marker detect A-frame AR.JS在标记检测 A 帧 AR.JS 上播放音频
【发布时间】：2018-10-06 05:27:59
【问题描述】：

当使用 A-frame 和 AR.JS 库检测到标记时，我正在尝试播放音频源。

目前我有以下场景、相机和标记：

  <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>

我最初尝试了以下方法：

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");
        }

但是，它不起作用。关于为什么这不起作用或不起作用的任何想法？我什至没有看到控制台日志，所以它似乎也没有运行。

【问题讨论】：

标签： javascript jquery three.js aframe ar.js

【解决方案1】：

您是否注册了一个处理每个滴答声的组件？

<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>

【讨论】：

谢谢！我确实尝试注册一个组件，但我一定是写错了我的代码，因为它没有执行，更不用说创建任何控制台日志了。可能是因为我尝试将其写在头部而不是靠近正文标签的末尾。这非常有效。