Audio visualizer components for A-Frame.

Usage no npm install needed!

<script type="module">
  import aframeAudioVisualizerComponents from '';



Audio visualizer components for A-Frame using WebAudio API.



Property Description Default Value
fftSize Frequency domain. 2048
smoothingTimeConstant How smooth the frequency data is returned. 0.8
unique Whether to share the audio instance with other visualizing entities. false

To access the analyser node:



Adds kick with audio-visualizer component as a dependency.

Kicks are detected when the amplitude (normalized values between 0 and 1) of a specified frequency, or the max amplitude over a range, is greater than the minimum threshold, as well as greater than the previously registered kick's amplitude, which is decreased by the decay rate per frame.

Property Description Default Value
frequency Range of frequencies of spectrum to check. 127, 129
threshold Threshold of amplitude to go over to fire a kick. 0.00001
decay Rate that previously registered kick's amplitude is reduced by on every frame. 0

Events will be emitted on kicks and off kicks.

Event Name Description
audio-visualizer-kick-start Kick start. Went from not kicking to kicking.
audio-visualizer-kick-end Kick end. Went from kicking to not kicking.


Browser Installation

Install and use by directly including the browser files:

  <title>Audio Visualizer</title>
  <script src=""></script>
  <script src=""></script>

    <a-entity audio-visualizer="src: url(rickroll.mp3)" audio-visualizer-kick></a-entity>

NPM Installation

Install via NPM:

npm install aframe-audio-visualizer-components

Then register and use.