使用 AR.js 进行图像跟踪时播放和摆出声音答案

【问题标题】：Play and pose sound when image tracking is on with AR.js使用 AR.js 进行图像跟踪时播放和摆出声音
【发布时间】：2020-11-07 12:51:37
【问题描述】：

我只想在图像跟踪打开时播放 mp3，并在关闭时停止声音。我不知道怎么用 a-nft 来做……这个是 AR.js 的图像跟踪。

我想我需要添加脚本来检查图像跟踪是否打开和关闭。请给我任何建议。谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Sample: AR.js with Image Tracking</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
   <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
<body>
   <div class="arjs-loader">
      <p>
         Now Loading...<br>
         Please prepare the marker image :)
      </p>
   </div>

   <a-scene
   vr-mode-ui="enabled: false;"
   renderer="logarithmicDepthBuffer: true;"
   embedded
   arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
   >

   <a-nft
   type="nft"
   url="image path"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5"
   >

   <a-sound src="path/to/sample.mp3" autoplay="false"></a-sound>

</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script>


</script>

<style>
body {
   font-family: helvetica, arial, sans-serif;
   margin: 0;
   overflow: hidden;
}
.arjs-loader {
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
}
.arjs-loader p {
   text-align: center;
   font-size: 1.25em;
   color: white;
}
</style>
</body>
</html>

【问题讨论】：

标签： javascript aframe ar.js

【解决方案1】：

如果你在资产中声明它，你可以给你的 a-sound 一个 ID，然后在你的实际 a-sound 中调用它。然后你可以有一个可以播放和暂停的自动脚本。这个脚本可能需要一些调整，但应该可以工作：

 <!DOCTYPE html>
<html lang="en">
<head>
   <title>Sample: AR.js with Image Tracking</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
   <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
   <script>
    window.onload = function() {
        AFRAME.registerComponent('shoundhandler', {
            init: function () {
                var marker = this.el;

                this.sound = document.querySelector("#sound");

                marker.addEventListener('markerFound', function () {
                    this.sound.play();
                }.bind(this));
    
        marker.addEventListener('markerLost', function() {
            this.sound.pause();
            this.sound.currentTime = 0;
        }.bind(this));
            }
        });
    };
</script>
</head>
<body>
   <div class="arjs-loader">
      <p>
         Now Loading...<br>
         Please prepare the marker image :)
      </p>
   </div>

   <a-scene
   vr-mode-ui="enabled: false;"
   renderer="logarithmicDepthBuffer: true;"
   embedded
   arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
   >

    <a-assets>
            <a-asset-item src="path/to/sample.mp3"
                preload="false" id="sound" response-type="arraybuffer" loop
                crossorigin webkit-playsinline autoplay="false" playsinline>
            </a-asset-item>
        </a-assets>
        
   <a-nft
   type="nft"
   url="image path"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5"
   >

   <a-sound src="#sound"></a-sound>

</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script>


</script>

<style>
body {
   font-family: helvetica, arial, sans-serif;
   margin: 0;
   overflow: hidden;
}
.arjs-loader {
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
}
.arjs-loader p {
   text-align: center;
   font-size: 1.25em;
   color: white;
}
</style>
</body>
</html>

【讨论】：