组件可同时播放多个音频文件(单击)Aframe webVR [英] component to play multiple audio files at the same time (on click) Aframe webVR

问题描述

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

I am trying to find a way to reproduce the effect of having all my sound files in my A-frame vr project autoplay once the scene loads, but with an on-window-click function so that they are able to work on browsers that do not allow autoplay / require user interaction

我确定该解决方案非常简单，但是我已经尝试了好几个小时，而且似乎无法在线找到包括堆栈在内的任何解决方案.当我尝试遵循此类教程时，我无法使其正常工作:

i'm sure the solution is pretty simple but I have tried for quite a few hours and can't seem to find a solution online including stack anywhere. when I try to follow tutorials such as this, I can't get them to work:

在A框架中单击时播放声音

从A-框架无法在任何浏览器(Safari/Chrome)上运行

在我的html中，我有类似的内容(但总共有大约10个声音文件和10个模型):

in my html i have something like this (but with about 10 sound files and 10 models in total):

<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>

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

then in a separate js file linked into the html I have this

 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)

编辑

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

this was the final solution thank you !!!

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

推荐答案

如果要获取具有 sound 组件的所有节点，则需要将选择器从 sounds 转换为声音- document.querySelectorAll('[sound]').

If you want to grab all nodes that have the sound component, then you need to change your selector from sounds to sound - document.querySelectorAll('[sound]').

还 querySelectorAll 将返回以下列表:元素，因此您必须遍历它们:

Also querySelectorAll will return a list of elements, so You have to iterate through them:

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

这篇关于组件可同时播放多个音频文件(单击)Aframe webVR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！