Javascript API
interfaces
Audio

Interface: Audio

View is a base class for all other visual components. All View-derived components have the following properties, methods, and events in addition to their own.

Hierarchy

Properties

Draggable

Optional Draggable: DraggableEffect

Inherited from

View.Draggable


Follow

Optional Follow: FollowEffect

Inherited from

View.Follow


Glow

Optional Glow: GlowEffect

Inherited from

View.Glow


LookAt

Optional LookAt: LookAtEffect

Inherited from

View.LookAt


Physics

Optional Physics: PhysicsEffect

Inherited from

View.Physics


Shadow

Optional Shadow: ShadowEffect

Inherited from

View.Shadow


Transform

Optional Transform: TransformEffect

Inherited from

View.Transform


attribution

attribution: Attribution


autoplay

autoplay: boolean

Indicates whether playback should automatically begin as soon as enough media is available to do so without interruption.

Default

false

backgroundColor

backgroundColor: undefined | string

The background color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined background color is transparent.

Example

// Set the background color of the view to a translucent red.
view.backgroundColor = 'rgba(255, 0, 0, 50%)'

Inherited from

View.backgroundColor


color

color: undefined | string

The foreground or text color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined foreground color is inherited from one of the component's ancestors.

Example

// Set the foreground color of the view to red.
view.color = 'red';

Inherited from

View.color


componentType

Readonly componentType: string

The component's type. E.g. "View", "Text", "Button", "Page", etc.

Inherited from

View.componentType


controls

controls: boolean

Indicates whether a UI with controls should be displayed.

Default

false

currentTime

Optional currentTime: number

The current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline.

Default

0

duration

Readonly duration: number

Indicates the total duration in seconds. If no data is available, the returned value is NaN. If the media is of indefinite length (such as streamed live media), the value is +Infinity.


height

height: number

The height of the component.

Inherited from

View.height


id

Readonly id: number

Every Component is assigned a unique numerical id that cannot be changed. Components can be looked up by id using the get function.

Inherited from

View.id


loaded

Readonly loaded: boolean

Indicates whether the media is loaded.

Default

false

loop

loop: boolean

Indicates whether the media should start over when it reaches the end.

Default

false

muted

muted: boolean

Determines whether audio is muted. true if the audio is muted and false otherwise.

Default

false

name

name: undefined | string

Every Component can have a user-assigned name. It can be anything and is not guaranteed to be unique. Components can be looked up by name using the get function.

Inherited from

View.name


opacity

opacity: number

The component's opacity, or level of transparency.

1 is fully opaque (not transparent at all), 0.5 is 50% see-through, and 0 is completely transparent.

Inherited from

View.opacity


page

Readonly page: undefined | Page

The Page that this component is a child of, if any.

Inherited from

View.page


parent

Readonly parent: undefined | View

When added to a Container (or a Page, which is a Container), the Container is assigned to the parent property.

Inherited from

View.parent


playbackRate

playbackRate: number

The default playback rate for the media.

Default

1.0

preload

preload: boolean

Indicates whether the audio data should be preloaded.

Default

false

rotation

rotation: number

The component's rotation, in degrees.

Inherited from

View.rotation


scale

scale: number

The component's scale multiplier.

Inherited from

View.scale


source

source: undefined | string

Contains the URL of a media resource to use.


style

style: Partial (opens in a new tab)<CSSStyleDeclaration (opens in a new tab)>

Low-level access to the component's CSS property.

Inherited from

View.style


tabIndex

tabIndex: undefined | number

Control if or how the component is focused when the tab key is pressed.

0 - The component should be focusable in sequential keyboard navigation, after any positive tabIndex values. a positive value - Should be focusable in sequential keyboard navigation, with the order defined by the value. -1 - Should not be focusable in sequential keyboard navigation, but could be focused programmatically. undefined - the browser decides whether the component is focusable.

Default

undefined

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex (opens in a new tab)

Inherited from

View.tabIndex


visible

visible: boolean

The component's visibility.

true is visible, false is invisible

Inherited from

View.visible


volume

volume: number

Indicates the audio volume, from 0 (silent) to 100 (loudest).

Default

100

width

width: number

The width of the component.

Inherited from

View.width


x

x: number

The component's x coordinate.

Inherited from

View.x


y

y: number

The component's y coordinate.

Inherited from

View.y

Methods

addEffect

addEffect(effect): void

Add an effect to the component.

Parameters

NameType
effectstring

Returns

void

Inherited from

View.addEffect


clone

clone(): Audio

Create an exact duplicate of a component.

The clone must be added to a container with appendChild to be visible.

Returns

Audio

Example

const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);

Overrides

View.clone


focus

focus(options?): void

Parameters

NameType
options?FocusOptions

Returns

void

Inherited from

View.focus


hasPointerCapture

hasPointerCapture(pointerId): boolean

Parameters

NameType
pointerIdnumber

Returns

boolean

Inherited from

View.hasPointerCapture


localPointFromClient

localPointFromClient(x, y): Object

Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.

Parameters

NameTypeDescription
xnumberThe x position in the client viewport.
ynumberThe y position in the client viewport.

Returns

Object

an object with x and y properties.

NameType
xnumber
ynumber

Example

let dragging = false;
let pointerOffset;
this.on("pointerdown", (event) => {
  this.setPointerCapture(event.pointerId);
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(event.clientX, event.clientY)
  pointerOffset = { x: point.x - this.x, y: point.y - this.y };
  dragging = true;
});
 
this.on("pointermove", (ev) => {
if (!dragging)
    return;
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(ev.clientX, ev.clientY);
  this.x = point.x - pointerOffset.x;
  this.y = point.y - pointerOffset.y;
});
 
this.on("pointerup", (event) => {
  this.releasePointerCapture(event.pointerId);
  dragging = false;
});

Inherited from

View.localPointFromClient


on

on<K>(type, listener, options?): () => void

Add an event listener to the component.

Type parameters

NameType
Kextends keyof EventHandlersEventMap

Parameters

NameType
typeK
listener(event: EventHandlersEventMap[K]) => any
options?EventListenerOptions

Returns

fn

Returns a function that removes the event listener.

▸ (): void

Add an event listener to the component.

Returns

void

Returns a function that removes the event listener.

Inherited from

View.on


pause

pause(): void

Pause the audio.

Returns

void


play

play(): void

Play the audio.

Returns

void


releasePointerCapture

releasePointerCapture(pointerId): void

Parameters

NameType
pointerIdnumber

Returns

void

Inherited from

View.releasePointerCapture


remove

remove(): void

Remove the component from its parent.

Returns

void

Example

view.remove();

Inherited from

View.remove


removeEffect

removeEffect(effect): void

Remove an effect to the component.

Parameters

NameType
effectstring

Returns

void

Inherited from

View.removeEffect


setPointerCapture

setPointerCapture(pointerId): void

Parameters

NameType
pointerIdnumber

Returns

void

Inherited from

View.setPointerCapture


stop

stop(): void

Stop the audio.

Returns

void

Events

error

error: "error"


loadeddata

loadeddata: "loadeddata"


timeupdate

timeupdate: "timeupdate"