---
title: "MediaSource | 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 MediaSource

The **`MediaSource`** interface of the Media Source Extensions API represents a source of media data for an HTMLMediaElement object. A MediaSource object can be attached to a HTMLMediaElement to be played in the user agent.

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

interface MediaSource {  
    [activeSourceBuffers](#activesourcebuffers): [SourceBufferList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferList/);  
    [duration](#duration): number;  
    [onsourceclose](#onsourceclose): ((this: MediaSource, ev: Event) \=> any) | null;  
    [onsourceended](#onsourceended): ((this: MediaSource, ev: Event) \=> any) | null;  
    [onsourceopen](#onsourceopen): ((this: MediaSource, ev: Event) \=> any) | null;  
    [readyState](#readystate): [ReadyState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.ReadyState/);  
    [sourceBuffers](#sourcebuffers): [SourceBufferList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferList/);  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: MediaSource, ev: [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\[[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;  
    [addSourceBuffer](#addsourcebuffer-1)(type: string): [SourceBuffer](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBuffer/);  
    [clearLiveSeekableRange](#clearliveseekablerange-1)(): void;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [endOfStream](#endofstream-1)(error?: [EndOfStreamError](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EndOfStreamError/)): void;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: MediaSource, ev: [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\[[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;  
    [removeSourceBuffer](#removesourcebuffer-1)(sourceBuffer: [SourceBuffer](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBuffer/)): void;  
    [setLiveSeekableRange](#setliveseekablerange-1)(start: number, end: number): void;  
}

#### Hierarchy

-   EventTarget
    -   MediaSource

##### Index

### Properties[](#properties)

[activeSourceBuffers](#activesourcebuffers) [duration](#duration) [onsourceclose](#onsourceclose) [onsourceended](#onsourceended) [onsourceopen](#onsourceopen) [readyState](#readystate) [sourceBuffers](#sourcebuffers)

### Methods[](#methods)

[addEventListener](#addeventlistener) [addSourceBuffer](#addsourcebuffer) [clearLiveSeekableRange](#clearliveseekablerange) [dispatchEvent](#dispatchevent) [endOfStream](#endofstream) [removeEventListener](#removeeventlistener) [removeSourceBuffer](#removesourcebuffer) [setLiveSeekableRange](#setliveseekablerange)

## Properties[](#properties-1)

### `Readonly`activeSourceBuffers[](#activesourcebuffers)

activeSourceBuffers: [SourceBufferList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferList/)

The **`activeSourceBuffers`** read-only property of the MediaSource interface returns a SourceBufferList object containing a subset of the SourceBuffer objects contained within sourceBuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.

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

### duration[](#duration)

duration: number

The **`duration`** property of the MediaSource interface gets and sets the duration of the current media being presented.

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

### onsourceclose[](#onsourceclose)

onsourceclose: ((this: MediaSource, ev: Event) \=> any) | null

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

### onsourceended[](#onsourceended)

onsourceended: ((this: MediaSource, ev: Event) \=> any) | null

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

### onsourceopen[](#onsourceopen)

onsourceopen: ((this: MediaSource, ev: Event) \=> any) | null

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

### `Readonly`readyState[](#readystate)

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

The **`readyState`** read-only property of the MediaSource interface returns an enum representing the state of the current MediaSource. The three possible values are:

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

### `Readonly`sourceBuffers[](#sourcebuffers)

sourceBuffers: [SourceBufferList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferList/)

The **`sourceBuffers`** read-only property of the MediaSource interface returns a SourceBufferList object containing the list of SourceBuffer objects associated with this MediaSource.

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

## Methods[](#methods-1)

### addEventListener[](#addeventlistener)

-   addEventListener<[K](#addeventlistenerk) extends keyof [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: MediaSource, ev: [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\[[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 [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)
    
    #### Parameters
    
    -   type: [K](#addeventlistenerk)
    -   listener: (this: MediaSource, ev: [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\[[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
    

### addSourceBuffer[](#addsourcebuffer)

-   addSourceBuffer(type: string): [SourceBuffer](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBuffer/)[](#addsourcebuffer-1)
    
    The **`addSourceBuffer()`** method of the MediaSource interface creates a new SourceBuffer of the given MIME type and adds it to the MediaSource's sourceBuffers list. The new SourceBuffer is also returned.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/MediaSource/addSourceBuffer)
    
    #### Parameters
    
    -   type: string
    
    #### Returns [SourceBuffer](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBuffer/)
    

### clearLiveSeekableRange[](#clearliveseekablerange)

-   clearLiveSeekableRange(): void[](#clearliveseekablerange-1)
    
    The **`clearLiveSeekableRange()`** method of the MediaSource interface clears a seekable range previously set with a call to setLiveSeekableRange().
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/MediaSource/clearLiveSeekableRange)
    
    #### Returns 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
    

### endOfStream[](#endofstream)

-   endOfStream(error?: [EndOfStreamError](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EndOfStreamError/)): void[](#endofstream-1)
    
    The **`endOfStream()`** method of the MediaSource interface signals the end of the stream.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/MediaSource/endOfStream)
    
    #### Parameters
    
    -   `Optional`error: [EndOfStreamError](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EndOfStreamError/)
    
    #### Returns void
    

### removeEventListener[](#removeeventlistener)

-   removeEventListener<[K](#removeeventlistenerk) extends keyof [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: MediaSource, ev: [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\[[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 [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)
    
    #### Parameters
    
    -   type: [K](#removeeventlistenerk)
    -   listener: (this: MediaSource, ev: [MediaSourceEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaSourceEventMap/)\[[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
    

### removeSourceBuffer[](#removesourcebuffer)

-   removeSourceBuffer(sourceBuffer: [SourceBuffer](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBuffer/)): void[](#removesourcebuffer-1)
    
    The **`removeSourceBuffer()`** method of the MediaSource interface removes the given SourceBuffer from the SourceBufferList associated with this MediaSource object.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/MediaSource/removeSourceBuffer)
    
    #### Parameters
    
    -   sourceBuffer: [SourceBuffer](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBuffer/)
    
    #### Returns void
    

### setLiveSeekableRange[](#setliveseekablerange)

-   setLiveSeekableRange(start: number, end: number): void[](#setliveseekablerange-1)
    
    The **`setLiveSeekableRange()`** method of the MediaSource interface sets the range that the user can seek to in the media element.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/MediaSource/setLiveSeekableRange)
    
    #### Parameters
    
    -   start: number
    -   end: number
    
    #### Returns void