Class: PeakMeter

PeakMeter(options)

new PeakMeter(options)

PeakMeter displays a splited or merged peak meter for audio signal

This component display a peak meter in several configuration. It can include a scale and its legend and be oriented vertically or horizontally. Modified https://github.com/esonderegger/web-audio-peak-meter
Parameters:
Name Type Description
options object

The peak meter 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
merged boolean <optional>
 false

Merge left and right channel into one output
legend object <optional>

The peak meter legend options

Properties
Name Type Attributes Default Description
dbScaleMin number <optional>
 60

The min scale value
dbScaleTicks number <optional>
 6

The tick distance, must be a multiple of scale min
colors object <optional>

The oscilloscope background and signal color

Properties
Name Type Attributes Default Description
background string <optional>
 ColorUtils.defaultPrimaryColor

The background color
min string <optional>
 #56D45B

The gradient min value
step0 string <optional>
 #AFF2B3

The gradient second value
step1 string <optional>
 #FFAD67

The gradient third value
step2 string <optional>
 #FF6B67

The gradient fourth value
max string <optional>
 #FFBAB8

The gradient max value
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

Extends

Members

(private) _audioCtx :object

The audio context

Type:
  • object
Inherited From:
Source:

(private) _canvasL :object

The canvas to rendered left channed data to

Type:
  • object
Inherited From:
Source:

(private) _canvasR :object

The canvas to rendered right channed data to

Type:
  • object
Inherited From:
Source:

(private) _ctxL :object

The left canvas associated context

Type:
  • object
Inherited From:
Source:

(private) _ctxR :object

The right 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) _merged :boolean

Merge L and R channel on output

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) _buildUI()

Create and configure canvas then append it to given DOM element.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _createPeakLabel()

Build the scale legend depending on component orientation.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _createScaleTicks()

Build the scale tick depending on component orientation.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _fillAttributes(options)

Internal method to fill internal properties from options object sent to constructor.
Parameters:
Name Type Description
options object

The frequency circle 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
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _mergedStereoAnalysis()

Perform a merged Left and Right analysis with 32 bit time domain data.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _onResize()

On resize event callback.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _pause()

On pause event callback.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _processAudioBin()

Real time method called by WebAudioAPI to process PCM data. Here we make a 8 bit frequency and time analysis. Then we use utils method to draw radial oscilloscope, linear point oscilloscope, background points and radial frequency bars.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _setAudioNodes()

Build audio chain with source.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _stereoAnalysis()

Perform a separated Left and Right analysis with 32 bit time domain data.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _updateDimensions()

Usually called on resize event, update canvas dimension to fit render to DOM object.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source: