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

Question

我有一个带有多个交互式按钮的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>

Answer 1

对于a帧声音组件来说，这是一个很好的特性请求:拥有一个声音启动事件，这样您就可以设置一个全局isPlaying标志。

一个潜在的解决方案:这听起来像是你想要的是一个全局状态，它决定了一个声音是否可以播放。

我已经编写了一个可以提供帮助的示例自定义组件：https://glitch.com/edit/#!/a-frame-singleton-sound?path=index.html:1:0

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

然后在使用中：

<a-sphere singleton-sound="src: #thunder;"></a-sphere>

如果你先预览样本并将鼠标悬停在蓝色框上，16s的音频将会播放，如果你将鼠标悬停在红色球体上，当第一个球还在运行时，它将不会播放。反之亦然。

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