audioanalyser does not capture any information when "sound" component is used.

[mr-spaghetti-code]

Hi there,

I am having trouble getting any data about my audio when I play the audio using the "sound" component attached to an entity.

For example, this does not work (note that I use the "sound" component and point it to #vocals):

<a-scene>
      <a-assets>
        <img id="floor" src="https://cdn.aframe.io/a-painter/images/floor.jpg" crossorigin="anonymous" />
        <img id="skymap" src="https://cdn.aframe.io/a-painter/images/sky.jpg" crossorigin="anonymous" />

        <audio id="song" src="assets/music/lsd.mp3"></audio>
      </a-assets>

      <!--Audio Analyser-->
      <a-sphere
        id="sphere"
        color="#000"
        audioanalyser="src: #song"
        audioanalyser-volume-scale="multiplier: .008"
        position="0 1 -4"
        side="double"
        shader="flat"
        sound="src: #song;
              volume: 1;
              autoplay: true"
      ></a-sphere>
</a-scene>

But this does:

<a-scene>
      <a-assets>
        <img id="floor" src="https://cdn.aframe.io/a-painter/images/floor.jpg" crossorigin="anonymous" />
        <img id="skymap" src="https://cdn.aframe.io/a-painter/images/sky.jpg" crossorigin="anonymous" />

        <audio id="song" src="assets/music/lsd.mp3" autoplay></audio>
      </a-assets>

      <!--Audio Analyser-->
      <a-sphere
        id="sphere"
        color="#000"
        audioanalyser="src: #song"
        audioanalyser-volume-scale="multiplier: .008"
        position="0 1 -4"
        side="double"
        shader="flat"
      ></a-sphere>

      <a-entity id="someSounds" sound="src: #song; on: click;"></a-entity>
</a-scene>

Do you know how I might be able to fix this?

Thanks so much. Happy to provide more examples.

[mr-spaghetti-code]

I managed to fix this. When you use the 'sound' component to attach audio to an entity, you're actually using the audio entity THREE.Audio( listener ). The solution is to retrieve the 'sound' child attached to the entity using getObject3D('sound').children[0].

So the initContext function should look like this:

  initContext: function () {
    const data = this.data;
    console.log(this.el)
    console.log(this.el.getObject3D('sound'))
    const sound = this.el.getObject3D('sound').children[0]
    const threeAnalyser = new THREE.AudioAnalyser(sound, data.fftSize)
    const analyser = (this.analyser = threeAnalyser.analyser)
    analyser.smoothingTimeConstant = data.smoothingTimeConstant;

    this.context = this.el.sceneEl.audioListener.context
    this.levels = new Uint8Array(analyser.frequencyBinCount);
    this.waveform = new Uint8Array(analyser.fftSize);

  },

Note that this makes "src" redundant.