Class: FrequencyBars

FrequencyBars(options)

new FrequencyBars(options)

FrequencyBars displays the audio spectrum as frequency bars in real time.

This will display a single canvas with frequency from left to right be bass to high. The bar height depends on audio bin intensity. The audio graph is then draw with a gradient from bottom to top that is from green to red. Those color can be custom ones (see constructor options).
Parameters:
Name Type Description
options object

The frequency bars options

Properties
Name Type Attributes Default Description
type string

The component type as string
player object

The player to take as processing input (if inputNode is given, player source will be ignored)
renderTo object

The DOM element to render canvas in
fftSize number

The FFT size for analysis. Must be a power of 2. High values may lead to heavy CPU cost
audioContext object <optional>
 null

The audio context to base analysis from
inputNode object <optional>
 null

The audio node to take source instead of player's one
colors Array.<object> <optional>

The peak meter gradient colors, must be objects with color (in Hex/RGB/HSL) and index (in Float[0,1]) properties
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

Extends

Members

(private) _audioCtx :object

The audio context

Type:
  • object
Inherited From:
Source:

(private) _canvas :object

The canvas to rendered mono data to

Type:
  • object
Inherited From:
Source:

(private) _ctx :object

The canvas associated context

Type:
  • object
Inherited From:
Source:

(private) _dom :object

Contains all useful DOM objects

Type:
  • object
Inherited From:
Source:

(private) _fftSize :number

FFT size used to analyse audio stream. Must be a power of 2

Type:
  • number
Inherited From:
Source:

(private) _inputNode :object

The source node to chain from ; it will ignore the output of HTML audio player

Type:
  • object
Inherited From:
Source:

(private) _isPlaying :boolean

The playing state of the player

Type:
  • boolean
Inherited From:
Source:

(private) _nodes :object

Audio nodes from web audio API to manipulate data with

Type:
  • object
Inherited From:
Source:

(private) _parentDimension :object

Save container dimension to restore when closing fullscreen

Type:
  • object
Inherited From:
Source:

(private) _player :object

The audio source (HTML audio player)

Type:
  • object
Inherited From:
Source:

(private) _renderTo :object

Target div to render module in

Type:
  • object
Inherited From:
Source:

(private) _resizeObserver :object

Resize observable to watch for any resize change

Type:
  • object
Inherited From:
Source:

(private) _type :string

The component type. See supported componenets in AudioVisualizer factory

Type:
  • string
Inherited From:
Source:

Methods

(private, static) _processAudioBin()

Real time method called by WebAudioAPI to process PCM data. Here we make a 8 bit frequency analysis. Then we use utils method to draw bar for each audio bin in studied audio spectrum.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source: