同时播放多个音频文件的组件（点击）Aframe webVR

Question

我正在尝试找到一种方法来重现场景加载后我的 A 帧 vr 项目中的所有声音文件自动播放的效果，但具有 on-window-click 功能，以便他们能够在不允许自动播放/需要用户交互的浏览器上工作

我确定解决方案非常简单，但我已经尝试了好几个小时，但似乎无法在任何地方找到包括堆栈在内的在线解决方案。当我尝试按照这样的教程进行操作时，我无法让它们工作：

Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)

在我的 html 中我有这样的东西（但总共有大约 10 个声音文件和 10 个模型）：

<a-assets>
   <a-asset-item id="logo" src="code/to/gltf"></a-asset-item> 
   <a-asset-item id="logo" src="code/to/gltf"></a-asset-item> 
   <audio id="track" src="code/to/audio" crossOrigin="anonymous"></audio> 
   <audio id="track" src="code/to/audio" crossOrigin="anonymous"></audio> 
 </a-assets>  

 <a-entity 

  gltf-model="#logo"
  play-audio
     
  sound="
  src: #track;
     
  loop: true;
  volume: 0.05;
  distanceModel: inverse;
  refDistance: 1000"

  position="0 1.5 -2.5" 
  rotation="90 0 0"
  scale="0.4 0.4 0.4"
  foo>

</a-entity> 

<a-entity 
     
     gltf-model="#bink" 
     navigate-on-click="url: bink.html"

     play-audio
     
     
     sound="
     src: #binkaudio;
     
     loop: true;
     volume: 1;
     distanceModel: inverse;
     refDistance: 10"
     
     position="-2.93 1.5 6" 
     rotation="90 149 0"
     scale="0.4 0.4 0.4"
     foo
     
     ></a-entity>

然后在一个单独的 js 文件中链接到 html 我有这个

 AFRAME.registerComponent('play-audio', {
   init: function () {
     this.onClick = this.onClick.bind(this);
   },
   play: function () {
     window.addEventListener('click', this.onClick);
   },
   // pause: function () {
   //   window.removeEventListener('click', this.onClick);
   // },
   onClick: function (evt) {
      var sceneEl = document.querySelector('a-scene')
      var entity = sceneEl.querySelectorAll('[sounds]');
       entity.components.sound.playSound();
   }
 });

编辑

我一直收到这条错误消息

Uncaught TypeError: Cannot read property 'sound' of undefined
    at i.onClick (audiohandler.js:109)
    at HTMLElement.emit (a-node.js:263)
    at i.twoWayEmit (cursor.js:415)
    at i.onCursorUp (cursor.js:271)
    at HTMLCanvasElement.<anonymous> (bind.js:12)

编辑

这是最终的解决方案，谢谢！！！

  
AFRAME.registerComponent('play-audio', {
  init: function () {
    this.onClick = this.onClick.bind(this);
  },
  play: function () {
    window.addEventListener('click', this.onClick);
  },
  pause: function () {
    window.removeEventListener('click', this.onClick);
  },
  onClick: function (evt) {
   let entity = document.querySelectorAll('[sound]');
    for (let item of entity) {
      item.components.sound.playSound();
   }
  }
});

Answer 1

如果你想抓取所有具有 sound 组件的节点，那么你需要将选择器从 sounds 更改为 sound - document.querySelectorAll('[sound]').

另外 querySelectorAll 将 return 一个元素列表，因此您必须遍历它们：

for (let item of list) {
  item.components.sound.playSound()
}

Answer 2

这太棒了，我已经尝试了一段时间了。我们如何调整此组件，以便您必须单击一次声音实体才能启动它（而不是单击场景中的任意位置？）

同时播放多个音频文件的组件（点击）Aframe webVR

component to play multiple audio files at the same time (on click) Aframe webVR

html

javascript

arrays

webvr

aframe