Class: Oscilloscope

Oscilloscope(options)

new Oscilloscope(options)

Oscilloscope displays a merged or L/R oscilloscope in real time.

This will display a single/dual canvas with frequency displayed with.
Parameters:
Name Type Description
options object

The oscilloscope 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
colors string <optional>

The oscilloscope background and signal color

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

The signal color
background string <optional>
 ColorUtils.defaultPrimaryColor

The background color
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) _fillAttributes(options)

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

The oscilloscope 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 8 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) _processAudioBin()

Real time method called by WebAudioAPI to process PCM data. Here we make a 8 bit time analysis.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _stereoAnalysis()

Perform a separated Left and Right analysis with 8 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: