A-Frame - lecture / pause du son avec une source personnalisée ('a-sound')

Question

Edit 2 : Voici le code qui fonctionne. Un grand merci à Piotr pour son aide, je n'aurais pas pu le faire si facilement sans vous.

sceneEl.querySelector('a-sound').setAttribute('sound', {src:url3}); 
      let playing = false;
      var el = document.querySelector('a-box');
      let audioEl = document.querySelector("a-sound");
      var audio = audioEl.components.sound;
      el.addEventListener('click', () => {
      if (!playing) {
      audio.playSound();
      } else {
      audio.stopSound();
      }
      playing = !playing;
      })

      } );
      request.send( null );
      }
      });

Edit : J'ai obtenu la lecture du son à partir d'une URL dynamique (dans mon fichier JSON), mais je n'arrive pas à obtenir la bonne fonction d'écoute d'événement (pour la lecture / pause au clic).

sceneEl.querySelector('a-sound').setAttribute('sound', {src:url3}); 
      let audioEl = document.querySelector("a-sound");
      let audio = audioEl.components.sound;
      sceneEl.querySelector('a-box').addEventListener('click', function () {
      if(!playing) {
          audio.play();
       } else {
          audio.pause();
          audio.currentTime = 0;
       }
       playing = !playing;
       });   
    } );
      request.send( null );
      }
      });

Original : J'utilise ce dans A-Frame, mais je cherche à lire le son à partir du src de l'entité ('a-sound') plutôt qu'à partir du lien de l'actif. La raison en est que je charge les fichiers sonores dynamiquement à partir d'un tableau JSON et qu'ils n'existent pas dans la liste des ressources. J'ai chargé tous mes fichiers mais j'ai du mal à faire en sorte que ce composant s'accroche à mes fichiers chargés. sceneEl.querySelector('a-sound').setAttribute('sound', {src:url3}); code. Je pense que c'est juste un petit problème de syntaxe mais je ne suis pas sûr à 100%. Quelqu'un pourrait-il regarder ce code pendant une minute et me dire si c'est faisable ? Voici le code (identique à celui du lien, à l'exception du (a-sound) dans le querySelector.

       AFRAME.registerComponent('audiohandler', {
       init:function() {
       let playing = false;
       let audio = document.querySelector('a-sound');
       this.el.addEventListener('click', () => {
       if(!playing) {
          audio.play();
       } else {
          audio.pause();
          audio.currentTime = 0;
       }
       playing = !playing;
       });
       }
       })
    </script>

Answer 1

Utilisation de la <a-sound> Vous devez gérer les choses un peu différemment.

la lecture / l'arrêt du son doit se faire dans le cadre de la sound composant . Vous devez y accéder via yourEntityName.components.sound et utiliser le playSound() y stopSound() méthodes.

Regardez sur mon problème . J'ai réglé la source via le setAttribute() et faire un bouton play / stop.

---

Mon <a-sound> a une géométrie pour être un bouton, mais vous pouvez faire une <a-sound> et l'utiliser comme ceci :

let audioEl = document.querySelector("a-sound");
audioEl.setAttribute("src", "sourceURL");

let audio = audioEl.components.sound;
// play = audio.playSound();
// stop = audio.stopSound():

---

En outre, il existe de nombreux problèmes liés au fait que les nœuds ne sont pas entièrement chargés. Regardez cet exemple :

<a-entity component></a-entity>
<a-sound></a-sound>

Si le composant tente de saisir une référence à l'objet document.querySelector("a-sound").components.sound il peut être indéfini. Si c'est le cas, vous devriez essayer d'attendre jusqu'à ce qu'elle émette le message loaded signal.