aframe mobile fully working but not working

Question

this is a additional question to a (solved) question I had here

I have managed to get video for my project working on mobile & desktop using the component from this glitch project

  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 videoEl = this.el.getAttribute('material').src;
    if (!videoEl) { return; }
    this.el.object3D.visible = true;
    videoEl.play();
  }
});

however, on mobile devices, a separate component to play sound from an entity is not working (it works on chrome and safari)

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

});

I am really confused, I have tried a few separate solutions but nothing seems to be working.

The only time I can get audio to play on mobile is by using this component however it is unsuitable as it only plays audio when the individual objects/entities are clicked, and I need all my sounds to play at once, by a click on the document window.

any help would be appreciated !!

EDIT

here is a code snippet of my project to show issue

UPDATE

I have managed to get the component working on mobile but now spatial sound is broken:

JS:

AFRAME.registerComponent('singleton-sound', {
      schema: {
      src: {type: 'string'},
      autoplay: {default: false},
      distanceModel: {default: 'inverse', oneOf: ['linear', 'inverse', 'exponential']},
      loop: {default: false},
      maxDistance: {default: 10000},
      on: {default: ''},
      poolSize: {default: 1},
      positional: {default: true},
      refDistance: {default: 1},
       rolloffFactor: {default: 1},
    
       volume: {default: 1}
      },
      
      multiple: true,
      
      init: function () {
        
   
      
      

        var audio = document.querySelector(this.data.src);

        window.addEventListener('click', playIfFree);
        // window.addEventListener('mouseenter', playIfFree);

        audio.addEventListener('ended', function () {
          window.isPlaying = true
        })

        function playIfFree () {
          if(!window.isPlaying) {
            audio.play();
            window.isPlaying = false
          } else {
            return false
          }
        }
      }
    
    });

document.addEventListener("DOMContentLoaded", function(event) {
      
        document.querySelector('#overlay').style.display = 'flex';
        document.querySelector('#overlay').addEventListener('click', function () {
          let sounds = document.querySelectorAll('audio');
          sounds.forEach (function (sound) {
            sound.play();
            sound.pause();
          })
          this.style.display = 'none';
        })
      
    });

HTML

         <a-entity 
       
         gltf-model="#alice" 

 
      navigate-on-click="url: alice.html"
         
         
         singleton-sound="
         src: #aliceaudio;
        
         volume: 1;
         distanceModel: inverse;
         rolloffFactor: 2"
         
         position="-0.06 1.5 11.594" 
         rotation="90 180 0"
         scale="0.4 0.4 0.4"
         foo
         
         ></a-entity>