Class: Timeline

Timeline(options)

new Timeline(options)

Timeline displays a scrolling audio waveform.

Will display a waveform that scrolls over playback. If provided, BPM is visualised as vertical bars with emphasis on main beats according to time signature. It is interactive and will update the player's current time value to match the dragged one. This class extends VisuComponentMono only because it performs an offline analysis on audio and the stereo information are already held in audio buffer.
Parameters:
Name Type Description
options object

The timeline 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

beat object <optional>
null

The beat configuration

Properties
Name Type Attributes Default Description
offset object <optional>
null

offset before first beat

bpm object <optional>
null

The track bpm

timeSignature object <optional>
null

The track time signature to put emphasis on main beats

wave object <optional>

The wave options

Properties
Name Type Attributes Default Description
align object <optional>
'center'

The alignment of the wave, can be either 'top', 'center' or 'bottom'

colors object <optional>

Timeline color potions

Properties
Name Type Attributes Default Description
background object <optional>
'#1D1E25'

Canvas background color in Hex/RGB/HSL

track object <optional>
'#12B31D'

The timeline color in Hex/RGB/HSL

mainBeat object <optional>
'#56D45B'

The main beat triangles color in Hex/RGB/HSL

subBeat object <optional>
'#FF6B67'

The sub beat triangles color in Hex/RGB/HSL

hotCues Array.<object> <optional>
[]

Hotcues sorted array to load waveform with. Each array item must contain a time key with its value

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
Overrides:
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) _addEvents()

Add component events (resize, play, pause, dbclick).
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _dblClick()

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

(private, static) _drawBeatBar(beatCount, canvas, ctx, j)

Draw a beat bar with its triangle with color that depends on main beat or sub beat.
Parameters:
Name Type Description
beatCount object

The beat number from first

canvas object

The canvas to draw in

ctx object

The associated context

j number

The y value

Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _drawTimeline(time)

Draw timeline with a given progress.
Parameters:
Name Type Description
time number

Track current time

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

Generate merged data from audio buffer.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _genScaledMonoData(buffer) → {Array.<number>}

Merged L/R Sub sample channel data to compute average value, depending on bar count.
Parameters:
Name Type Description
buffer object

Audio buffer

Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:
Returns:

Array of height per sub samples

Type
Array.<number>

(private, static) _getPlayerSourceFile()

Fetch audio file using xmlHTTP request.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _mouseDown(event)

Mouse down callback.
Parameters:
Name Type Description
event object

The mouse down event

Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _mouseDown(event)

Mouse move callback.
Parameters:
Name Type Description
event object

The mouse move event

Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _mouseUp()

Mouse up callback.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _onProgress()

On progress callback.
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 frequency and time analysis.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _processAudioFile(response)

Perform an offline analysis on whole track.
Parameters:
Name Type Description
response object

HTTP response for audio track to extract buffer from

Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _removeEvents()

Remove component events (resize, play, pause, dbclick).
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(private, static) _trackLoaded()

Player callback on track loaded.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) getClosestBeat()

Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) setHotCuePoint() → {object}

Define a HotCue point. It will be attached to the nearest bar. It will only be attached if no hotcue is registered on the targeted bar.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:
Returns:

The hotcue object with its information

Type
object

(static) updateBeatInfo(options)

Update the beat values. To be calle don change track
Parameters:
Name Type Description
options object

Track beat options

Properties
Name Type Attributes Default Description
beat.offset number <optional>
null

offset before first beat

beat.bpm number <optional>
null

The track bpm

beat.timeSignature number <optional>
null

The track time signature to emphasis main beats

Since:
  • 2020
Author:
  • Arthur Beaulieu
Source: