Class TimeOverview

This private class visualizes audio wave overview in time domain.

Hierarchy (view full)

Constructors

constructor

Properties

callback canvas channel context currentDataSize currentImageData currentSVGElement currentTime endTime graphics interval isActive isDown mode offsetX plotInterval sampleRate sprite startTime styles svg textInterval SVG_LINEAR_GRADIENT_ID_FFT SVG_LINEAR_GRADIENT_ID_TIME SVG_LINEAR_GRADIENT_ID_TIME_OVERVIEW XLINK XMLNS

Methods

activate clear create createFontString createSVGLinearGradient deactivate drag get getOffsetX onMouseMove onMouseStart onMouseUp onTouchEnd onTouchMove onTouchStart param setup start state update visualize visualizeBySVG visualizeOnCanvas visualizeTimeDomainFloat32ArrayBySVG visualizeTimeDomainFloat32ArrayOnCanvas

Constructors

constructor

Properties

Private callback

callback: DragCallbackFunction = ...

Protected canvas

canvas: null | HTMLCanvasElement = null

Protected channel

channel: ChannelNumber

Protected context

context: null | CanvasRenderingContext2D = null

Private currentDataSize

currentDataSize: number = 0

Private currentImageData

currentImageData: null | ImageData = null

Private currentSVGElement

currentSVGElement: null | Element = null

Private currentTime

currentTime: CurrentTimeStyles = ...

Private endTime

endTime: number = 0

Protected graphics

graphics: GraphicsApi = ''

Protected interval

interval: number = 1000

Protected isActive

isActive: boolean = false

Private isDown

isDown: boolean = false

Private mode

mode: DragMode = 'update'

Private offsetX

offsetX: number = 0

Private plotInterval

plotInterval: number = 0.0625

Protected sampleRate

sampleRate: number

Private sprite

sprite: string = 'rgba(255, 255, 255, 0.25)'

Private startTime

startTime: number = 0

Protected styles

styles: GraphicsStyles = ...

Protected svg

svg: null | SVGSVGElement = null

Private textInterval

textInterval: number = 60

Static Protected SVG_LINEAR_GRADIENT_ID_FFT

SVG_LINEAR_GRADIENT_ID_FFT: string = 'svg-linear-gradient-fft'

Static Protected SVG_LINEAR_GRADIENT_ID_TIME

SVG_LINEAR_GRADIENT_ID_TIME: string = 'svg-linear-gradient-time'

Static Protected SVG_LINEAR_GRADIENT_ID_TIME_OVERVIEW

SVG_LINEAR_GRADIENT_ID_TIME_OVERVIEW: string = 'svg-linear-gradient-time-overview'

Static Readonly XLINK

XLINK: "http://www.w3.org/1999/xlink" = ...

Static Readonly XMLNS

XMLNS: "http://www.w3.org/2000/svg" = ...

Methods

activate

clear

create

Protected createFontString

Protected createSVGLinearGradient

  • createSVGLinearGradient(linearGradientId): null | SVGDefsElement

  • This method creates elements for SVG linear gradient.

    Parameters

    • linearGradientId: string

      This argument is id attribute for SVGLinearGradientElement.

    Returns null | SVGDefsElement

    This value is as instance of SVGDefsElement.

deactivate

drag

get

Private getOffsetX

  • getOffsetX(event): number

  • This method returns X coordinate from instance of MouseEvent or TouchEvent.

    Parameters

    • event: MouseEvent | TouchEvent

      This argument is instance of MouseEvent or TouchEvent.

    Returns number

    Return value is X coordinate as mouse or touch position.

Private onMouseMove

  • onMouseMove(event): void

  • This method is event listener for visualizing rectangle.

    Parameters

    • event: MouseEvent

      This argument is instance of MouseEvent.

    Returns void

Private onMouseStart

  • onMouseStart(event): void

  • This method is event listener for visualizing rectangle.

    Parameters

    • event: MouseEvent

      This argument is instance of MouseEvent.

    Returns void

Private onMouseUp

  • onMouseUp(event): void

  • This method is event listener for visualizing rectangle.

    Parameters

    • event: MouseEvent

      This argument is instance of MouseEvent.

    Returns void

Private onTouchEnd

  • onTouchEnd(event): void

  • This method is event listener for visualizing rectangle.

    Parameters

    • event: TouchEvent

      This argument is instance of TouchEvent.

    Returns void

Private onTouchMove

  • onTouchMove(event): void

  • This method is event listener for visualizing rectangle.

    Parameters

    • event: TouchEvent

      This argument is instance of TouchEvent.

    Returns void

Private onTouchStart

  • onTouchStart(event): void

  • This method is event listener for visualizing rectangle.

    Parameters

    • event: TouchEvent

      This argument is instance of TouchEvent.

    Returns void

param

setup

start

  • start(data, minDecibels?, maxDecibels?): Visualizer

  • This method visualizes sound wave to Canvas or SVG. This method conceals difference of API for visualization.

    Parameters

    • data: Float32Array | Uint8Array

      This argument is sound data for visualization.

    • Optional minDecibels: number

      This argument is parameter for spectrum. The default value is -100 dB.

    • Optional maxDecibels: number

      This argument is parameter for spectrum. The default value is -30 dB.

    Returns Visualizer

    Return value is for method chain.

state

update

Private visualize

  • visualize(event, type, offsetX): void

  • This method visualizes rectangle for audio current time.

    Parameters

    • event: MouseEvent | TouchEvent

      This argument is instance of MouseEvent or TouchEvent.

    • type: MouseEventTypes

      This argument is one of 'mousedown', 'mousemove', 'mouseup', 'touchstart', 'touchmove', 'touchend'.

    • offsetX: number

      This argument is X coordinate on Canvas or SVG from window.

    Returns void

Protected visualizeBySVG

  • visualizeBySVG(data, _minDecibels?, _maxDecibels?): void

  • This method visualizes audio wave overview to SVG.

    Parameters

    • data: Float32Array | Uint8Array

      This argument is audio data for visualization.

    • Optional _minDecibels: number
    • Optional _maxDecibels: number

    Returns void

Protected visualizeOnCanvas

  • visualizeOnCanvas(data, _minDecibels?, _maxDecibels?): void

  • This method visualizes audio wave overview to Canvas.

    Parameters

    • data: Float32Array | Uint8Array

      This argument is audio data for visualization.

    • Optional _minDecibels: number
    • Optional _maxDecibels: number

    Returns void

Protected visualizeTimeDomainFloat32ArrayBySVG

  • visualizeTimeDomainFloat32ArrayBySVG(data, innerWidth, innerHeight, middle, numberOfPlots, linearGradientId): null | SVGPathElement | SVGGElement

  • This method visualizes time domain data (Float32Array) to SVG.

    Parameters

    • data: Float32Array

      This argument is time domain data.

    • innerWidth: number

      This argument is width of visualization area.

    • innerHeight: number

      This argument is height of visualization area.

    • middle: number

      This argument is middle of visualization area.

    • numberOfPlots: number

      This argument is interval for visualization.

    • linearGradientId: string

      This argument is id attribute for SVGLinearGradientElement.

    Returns null | SVGPathElement | SVGGElement

    This value is instance of SVGPathElement or SVGGElement.

Protected visualizeTimeDomainFloat32ArrayOnCanvas

  • visualizeTimeDomainFloat32ArrayOnCanvas(context, data, innerWidth, innerHeight, middle, numberOfPlots?): void

  • This method visualizes time domain data (Float32Array) to Canvas.

    Parameters

    • context: CanvasRenderingContext2D

      This argument is instance of CanvasRenderingContext2D.

    • data: Float32Array

      This argument is time domain data.

    • innerWidth: number

      This argument is width of visualization area.

    • innerHeight: number

      This argument is height of visualization area.

    • middle: number

      This argument is middle of visualization area.

    • Optional numberOfPlots: number

      This argument is interval for visualization.

    Returns void

Settings

Member Visibility

Theme

On This Page

constructorcallbackcanvaschannelcontextcurrentDataSizecurrentImageDatacurrentSVGElementcurrentTimeendTimegraphicsintervalisActiveisDownmodeoffsetXplotIntervalsampleRatespritestartTimestylessvgtextIntervalSVG_LINEAR_GRADIENT_ID_FFTSVG_LINEAR_GRADIENT_ID_TIMESVG_LINEAR_GRADIENT_ID_TIME_OVERVIEWXLINKXMLNSactivateclearcreatecreateFontStringcreateSVGLinearGradientdeactivatedraggetgetOffsetXonMouseMoveonMouseStartonMouseUponTouchEndonTouchMoveonTouchStartparamsetupstartstateupdatevisualizevisualizeBySVGvisualizeOnCanvasvisualizeTimeDomainFloat32ArrayBySVGvisualizeTimeDomainFloat32ArrayOnCanvas

Generated using TypeDoc