在 a-frame 中，当新声音开始播放时，如何停止所有声音？

Question

当我点击 a-entity 时，它会播放声音，但是我怎样才能让它在播放时停止所有其他声音，这样才不会是一团糟？

我已经用谷歌搜索了这个问题并尝试添加他们使用的代码，但它们没有奏效，我尝试了大约 5 种不同的代码。

我的声音是这样的：

<audio id="mercury-sound" src="mercury.mp3" preload="auto"></audio>

<script id="mercury" type="text/html">
          <a-entity class="mercury"
            geometry="primitive: sphere; radius: 0.67"
            material="shader: flat; src: ${thumb}"
            event-set__mouseenter="_target: #image-mercury; material.src: ${src}; opacity: 1"
            event-set__mouseleave="_target: #image-mercury; material.src: ${src}; opacity: 0">
            </a-entity>
          </script>


<a-entity template="src: #mercury" sound="src: #mercury-sound; on"></a-entity>

我希望它播放声音并在播放时停止所有其他声音。

编辑：如果其他人遇到此问题，这就是解决它的方法

模板组件正在创建子节点，需要抓取let el = e.target.parentNode。在这里检查一下，我也会在 js 中管理所有与声音相关的逻辑，但那是另一个话题 :) 顺便说一句，可怜的冥王星在哪里！ ——彼得·亚当·米列夫斯基

Answer 1

这是一种使用js 的方法。这个想法是：

1) 保留有声音的元素数组
2) 单击一个时 - 遍历数组并停止声音
3）播放“点击”的一个

有这样的设置：

<a-box sound='#first'></a-box>
<a-box sound='#second'></a-box>
<a-box sound='#third'></a-box>

您可以创建一个脚本，它将：

// grab all elements with the sound component
var soundEls = document.querySelectorAll('[sound]')

// make sure all of those react on a 'click' event
for (var i = 0; i < soundEls.length; i++) {
   var item = soundEls[i];
   item.addEventListener('click', e => {
        let el = e.target

        // don't replay an already playing sound
        let isPlaying = el.components.sound.isPlaying

        // stop all sounds
        soundEls.forEach(soundEl => {
            soundEl.components.sound.stopSound()
        })

        // play the clicked sound if isn't already playing
        if (!isPlaying)
            el.components.sound.playSound()
  })
}

通常，我建议使用 aframe custom component。但以这种方式获得这个想法可能更容易。查看this glitch。