new Waveform(options)
Waveform displays the track audio waveform.
This component will perform an offline analysis to display the whole track audio shape, and provide different colors to track the audio progress. It is interactive and will update the player's current time value to match the clicked 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 waveform options Properties
|
- Since:
- 2020
- 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) _addEvents()
Add component events (resize, play, pause, dbclick).
- Since:
- 2020
- Source:
(private, static) _buildUI()
Create and configure canvas then append it to given DOM element.
- Since:
- 2020
- Source:
(private, static) _dblClick()
On double click event callback.
- Since:
- 2020
- Source:
(private, static) _drawFileWaveform(progressPercentage)
Draw waveform with a given progress.
Parameters:
| Name | Type | Description |
|---|---|---|
progressPercentage |
number | Track progress percentage |
- Since:
- 2020
- 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
|
- Since:
- 2020
- Source:
(private, static) _fillData()
Generate merged or stereo data from audio buffer.
- Since:
- 2020
- Source:
(private, static) _genScaledData(data) → {Array.<number>}
L/R Sub sample channel data to compute average value, depending on bar count.
Parameters:
| Name | Type | Description |
|---|---|---|
data |
Float32Array | Channel data (L/R here) |
- Since:
- 2020
- Source:
Returns:
Array of height per sub samples
- Type
- Array.<number>
(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
- Source:
Returns:
Array of height per sub samples
- Type
- Array.<number>
(private, static) _getPlayerSourceFile()
Fetch audio file using xmlHTTP request.
- Since:
- 2020
- Source:
(private, static) _onClick(event)
Update waveform progress according to mouse seek event.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
object | The mouse event |
- Since:
- 2020
- Source:
(private, static) _onResize()
On resize event callback.
- Since:
- 2020
- 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
- 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
- Source:
(private, static) _removeEvents()
Remove component events (resize, play, pause, dbclick).
- Since:
- 2020
- Source:
(private, static) _scaleDataToHeight(sampledData) → {Array.<number>}
Scale channel data into an array of height to be used in canvas on draw.
Parameters:
| Name | Type | Description |
|---|---|---|
sampledData |
Array.<number> | Channel data |
- Since:
- 2020
- Source:
Returns:
Array of height per sub samples
- Type
- Array.<number>
(private, static) _trackLoaded()
Player callback on track loaded.
- Since:
- 2020
- Source: