Aframe A帧项目-如何禁止不同音频源相互播放

我有一个A帧项目，有多个交互按钮，可以播放音频源

问题是，用户可能会意外地双击按钮，音频将在原始音频播放后立即再次播放

用户还可以单击不同的按钮，在原稿仍在播放时播放不同的音频

解决这些问题的最佳方法是什么

谢谢

 <!--Teleportation-->
    <a-entity position="-1.72 1.06 -2.57" class="teleport">
      <a-box color="white" depth=".1" height=".1" width="0.3" color="white" rotation="-30 0 0" position="0 -.08 -.2">
        <a-entity text="align: center; color:black;value: Teleport" position="-.02 0 0.05"></a-entity>
      </a-box>

      <a-cylinder position="0 -.17 0" color="yellow" height=".2" radius=".1"
                  sound__1="on: mouseenter; src: #teleportation-script;"
                  sound__2="on: click; src: #teleportation-script;"></a-cylinder>
    </a-entity>

    <!--Hyperdrive-->
    <a-entity position="1.72 1.06 -2.57" class="hyperdrive">
      <a-box color="white" depth=".1" height=".1" width="0.3" color="white" rotation="-30 0 0" position="0 -.08 -.2">
        <a-entity text="align: center; color:black;value: Hyperdrive" position="-.02 0 0.05"></a-entity>
      </a-box>
      <a-entity gltf-model-next="#button" scale=".2 .2 .2" position="0 -.08 0"
                sound__1="on: mouseenter; src: #hyperdrive-script;"
                sound__2="on: click; src: #hyperdrive-script;">
      </a-entity>
    </a-entity>

    <!--Comms-->
    <a-entity position="-1.4 1.06 -1.6" class="comms">
      <a-box color="white" depth=".1" height=".1" width="0.3" color="white" rotation="-30 0 0" position="0 -.08 -.2">
        <a-entity text="align: center; color:black;value: Comms" position="-.02 0 0.05"></a-entity>
      </a-box>

      <a-entity gltf-model-next="#comms" scale=".05 .05 .05" rotation="0 45 0" position="0 -0.1 0.05"
                sound__1="on: mouseenter; src: #comms-script;"
                sound__2="on: click; src: #comms-script;"></a-entity>
    </a-entity>

    <!--Planetary Information-->
    <a-entity position="-1.0 1.06 -2.07" class="planet">
      <a-box color="white" depth=".1" height=".1" width="0.3" color="white" rotation="-30 0 0" position="0 -.08 -.2">
        <a-entity text="align: center; color:black;value: Planet Info" position="-.02 0 0.05"></a-entity>
      </a-box>
      <a-triangle scale=".2 .2 .2" rotation="-90 0 0" color="orange" position="0.1 -.08 .10"
                  sound__1="on: mouseenter; src: #planet-info-script;"
                  sound__2="on: click; src: #planet-info-script;"></a-triangle>
    </a-entity>

    <!--Lasers-->
    <a-entity position="1.4 1.06 -1.6" class='lasers'>

      <a-sphere radius=".1" position="0 -.15 0" color="red"
                sound__1="on: mouseenter; src: #lasers-script;"
                sound__2="on: click; src: #lasers-script;"></a-sphere>

      <a-box color="white" depth=".1" height=".1" width="0.3" color="white" rotation="-30 0 0" position="0 -.08 -.2">
        <a-entity text="align: center; color:black;value: Lasers" position="-.02 0 0.05"></a-entity>
      </a-box>
    </a-entity>

---

对于a帧声音组件来说，这是一个很好的功能请求：启动声音事件，以便设置全局显示标志

对于潜在的解决方案： 听起来你想要的是一个全局状态，它表示一个声音是否可以播放

我已经编写了一个示例自定义组件，可以帮助：

然后在使用中：

如果预览示例并首先将鼠标悬停在蓝色框上，将播放16s音频，如果同时将鼠标悬停在红色球体上，则在第一个球体仍在运行时，音频将不会播放。反之亦然

---

声音结束时，它会将window.isPlaying的标志设置为false，以便下一个事件处理程序能够播放声音。

听到Yoni真棒！祝你在这个项目上好运！注：这是项目的最终版本。很酷，看起来很棒。将音频作为WebVR体验的一部分，这是一个很好的例子，它使其比文本和点击更生动。

AFRAME.registerComponent('singleton-sound', {
  schema: {
    src: {type: 'string'}
  },
  init: function () {
    var audio = document.querySelector(this.data.src);

    this.el.addEventListener('click', playIfFree);
    this.el.addEventListener('mouseenter', playIfFree);

    audio.addEventListener('ended', function () {
      window.isPlaying = false
    })

    function playIfFree () {
      if(!window.isPlaying) {
        audio.play();
        window.isPlaying = true
      } else {
        return false
      }
    }
  }
});