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，以便下一个事件处理程序能够播放它的声音。

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

A-Frame Project - How to disable different audio sources from playing over each other

webvr

aframe