---
title: "RemotePlayback | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface RemotePlayback

The **`RemotePlayback`** interface of the Remote Playback API allows the page to detect availability of remote playback devices, then connect to and control playing on these devices.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback)

interface RemotePlayback {  
    [onconnect](#onconnect): ((this: RemotePlayback, ev: Event) \=> any) | null;  
    [onconnecting](#onconnecting): ((this: RemotePlayback, ev: Event) \=> any) | null;  
    [ondisconnect](#ondisconnect): ((this: RemotePlayback, ev: Event) \=> any) | null;  
    [state](#state): [RemotePlaybackState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.RemotePlaybackState/);  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: RemotePlayback, ev: [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [addEventListener](#addeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [cancelWatchAvailability](#cancelwatchavailability-1)(id?: number): Promise<void\>;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [prompt](#prompt-1)(): Promise<void\>;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: RemotePlayback, ev: [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [removeEventListener](#removeeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [watchAvailability](#watchavailability-1)(  
        callback: [RemotePlaybackAvailabilityCallback](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackAvailabilityCallback/),  
    ): Promise<number\>;  
}

#### Hierarchy

-   EventTarget
    -   RemotePlayback

##### Index

### Properties[](#properties)

[onconnect](#onconnect) [onconnecting](#onconnecting) [ondisconnect](#ondisconnect) [state](#state)

### Methods[](#methods)

[addEventListener](#addeventlistener) [cancelWatchAvailability](#cancelwatchavailability) [dispatchEvent](#dispatchevent) [prompt](#prompt) [removeEventListener](#removeeventlistener) [watchAvailability](#watchavailability)

## Properties[](#properties-1)

### onconnect[](#onconnect)

onconnect: ((this: RemotePlayback, ev: Event) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback/connect_event)

### onconnecting[](#onconnecting)

onconnecting: ((this: RemotePlayback, ev: Event) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback/connecting_event)

### ondisconnect[](#ondisconnect)

ondisconnect: ((this: RemotePlayback, ev: Event) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback/disconnect_event)

### `Readonly`state[](#state)

state: [RemotePlaybackState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.RemotePlaybackState/)

The **`state`** read-only property of the RemotePlayback interface returns the current state of the RemotePlayback connection.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback/state)

## Methods[](#methods-1)

### addEventListener[](#addeventlistener)

-   addEventListener<[K](#addeventlistenerk) extends keyof [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: RemotePlayback, ev: [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-1)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)
    
    #### Parameters
    
    -   type: [K](#addeventlistenerk)
    -   listener: (this: RemotePlayback, ev: [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\[[K](#addeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    
-   addEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-2)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    

### cancelWatchAvailability[](#cancelwatchavailability)

-   cancelWatchAvailability(id?: number): Promise<void\>[](#cancelwatchavailability-1)
    
    The **`cancelWatchAvailability()`** method of the RemotePlayback interface cancels the request to watch for one or all available devices.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback/cancelWatchAvailability)
    
    #### Parameters
    
    -   `Optional`id: number
    
    #### Returns Promise<void\>
    

### dispatchEvent[](#dispatchevent)

-   dispatchEvent(event: Event): boolean[](#dispatchevent-1)
    
    The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)
    
    #### Parameters
    
    -   event: Event
    
    #### Returns boolean
    
    Inherited from EventTarget.dispatchEvent
    

### prompt[](#prompt)

-   prompt(): Promise<void\>[](#prompt-1)
    
    The **`prompt()`** method of the RemotePlayback interface prompts the user to select an available remote playback device and give permission for the current media to be played using that device.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback/prompt)
    
    #### Returns Promise<void\>
    

### removeEventListener[](#removeeventlistener)

-   removeEventListener<[K](#removeeventlistenerk) extends keyof [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: RemotePlayback, ev: [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-1)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)
    
    #### Parameters
    
    -   type: [K](#removeeventlistenerk)
    -   listener: (this: RemotePlayback, ev: [RemotePlaybackEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackEventMap/)\[[K](#removeeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    
-   removeEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-2)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    

### watchAvailability[](#watchavailability)

-   watchAvailability(callback: [RemotePlaybackAvailabilityCallback](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackAvailabilityCallback/)): Promise<number\>[](#watchavailability-1)
    
    The **`watchAvailability()`** method of the RemotePlayback interface watches the list of available remote playback devices and returns a Promise that resolves with the callbackId of a remote playback device.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/RemotePlayback/watchAvailability)
    
    #### Parameters
    
    -   callback: [RemotePlaybackAvailabilityCallback](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.RemotePlaybackAvailabilityCallback/)
    
    #### Returns Promise<number\>