Search code examples
htmltimecomponentssettimeoutaframe

Timer + Aframe : How to use setTimeOut for Aframe.registercomponent("...")


I know it's a beginner's question but I have a bit of trouble with html / javascript. I learned about the setTimeout (function, time) and I knew how to use it by creating a function. However, I was wondering if it is possible to use this setTimeOut for Aframe.registercomponent my other scripts? I didn't find anything on that and all my attempts failed.

For example for the "audioanalyser-waveform":

AFRAME.registerComponent('audioanalyser-waveform', {
  dependencies: ['audioanalyser'],

  schema: {
    maxHeight: {default: 0.2},
    multiplier: {default: .01},
    radius: {default: 1},
  },

  init: function () {
    this.colors = [];
    this.geometry;
    this.levels = [];
    this.noisePos = 0;
    this.rings = [];
  },


  update: function () {
    setTimeout(Color, 4000);
    var data = this.data;
    var el = this.el;
    var i; 
    ...
    ...

This one is in my wave.js script and i know i can call it in my index.html with the tags:

      <a-entity id="analyser"
        audioanalyser="src: #song"
        audioanalyser-waveform="radius: 1"
        rotation="210 0 0"
        position="0 100 -150"
      ></a-entity>

And it would have been so simple if I could add that :

 <script> setTimeout(audioanalyser-waveform, 4000); </script>

But it doesn't work like that and I don't have idea how to set the start / stop of an Aframe.registercomponent to choose its seconds of play.

Can you help me please...

Pulsar,


Solution

  • What are you trying to accomplish? Can you have a component that sets audioanalyser-waveform after 4000ms?

      <a-entity id="analyser"
        audioanalyser="src: #song"
        rotation="210 0 0"
        position="0 100 -150"
        your-component
      ></a-entity>
    

    Component code:

    AFRAME.registerComponent('your-component', {
      ...
      init: function () {
        setTimeout(() => {
          this.el.setAttribute('audioanalyser-waveform', {radius: 1});
        }, 4000)
      }
      ...
    });