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

Question

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:

Play sound on click in A-Frame

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

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>

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

EDIT

I keep recieveing this error message

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)

EDIT

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

Answer 1

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]') .

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

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

Answer 2

This is fantastic and something I've been trying to figure out for a while. How could we adapt this component so that you had to click on once of the sound entities to start it (instead of clicking anywhere in the scene?)