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

Question

我有一个 A-Frame 项目，其中包含多个可引导音频源播放的交互式按钮。

问题是用户可能会不小心双击按钮，然后音频会在原声之后再次播放。

用户还可以在原件仍在播放时单击其他按钮并播放不同的音频。

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

谢谢！

 <!--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-frame 声音组件来说是一个很好的功能请求：要有一个声音启动事件，这样您就可以设置一个全局 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>

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

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