标记检测时播放音频的持续警报答案

【问题标题】：Constant Alert for Audio playing on marker detection标记检测时播放音频的持续警报
【发布时间】：2018-10-10 18:41:59
【问题描述】：

我有一个带有 A-frame 和 AR.JS 的站点，在其中我可以在标记检测时播放音频。但是，当标记在视图中时，我会在控制台中不断弹出此警报数次。

'components audio warn All the sounds are playing. If you need to play more sounds simultaneously consider increasing the size of pool with the poolSize attribute. <a-entity sound="src: #sound" autoplay="false">'

它似乎要求每一帧/几帧。关于如何阻止这种情况的任何想法？这似乎是一种不好的行为，尤其是对于移动设备。

作为参考，这里是场景代码：

<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;';>
       <a-assets>
            <audio id="sound" src="audio.mp3" preload="auto"></audio>
        </a-assets>
        <a-marker preset="custom" type="pattern" url="img/pattern-marker.patt">
        <!--<a-marker preset="hiro">-->
        <!--<a-torus-knot color="#000000" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>-->
                <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>

以及注册组件和事件的代码：

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 中添加一个“isPlayed”标志 - 将其设置为 true，一旦播放完毕就不再播放。

标签： javascript jquery aframe ar.js

【解决方案1】：

取决于你的目标：

1) 您可以在播放声音之前通过检查currentTime 属性来检查HTML 媒体元素是否正在播放。或者为playing 和ended 音频元素事件设置任何布尔变量。

2) 当标记不可见时，您可以pause() 音频。

您可以查看here，只有在结束/重新加载时才会播放音频。更多关于媒体here。

【讨论】：

【解决方案2】：

您可以使用标志变量并订阅声音事件：

AFRAME.registerComponent('soundhandler', {
    playingSound = false, //flag vble.
    soundToHandle = document.querySelector('[sound]'),
    init: function() {
      soundToHandle.stopSound = function() {  //sound stoped event
        playingSound = false;
      };
      soundToHandle.playSound = function() { //sound played event
        playingSound = true;
      };
    },
    tick: function () {
         if ((document.querySelector('a-marker').object3D.visible == true) && (!playingSound)) {
            soundToHandle.components.sound.playSound();
        } else if ((document.querySelector('a-marker').object3D.visible == false) && (playingSound)){
             soundToHandle.components.sound.stopSound();
        }

     }
});

【讨论】：