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

The **`SourceBuffer`** interface represents a chunk of media to be passed into an HTMLMediaElement and played, via a MediaSource object. This can be made up of one or several media segments.

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

interface SourceBuffer {  
    [appendWindowEnd](#appendwindowend): number;  
    [appendWindowStart](#appendwindowstart): number;  
    [buffered](#buffered): [TimeRanges](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TimeRanges/);  
    [mode](#mode): [AppendMode](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AppendMode/);  
    [onabort](#onabort): ((this: SourceBuffer, ev: Event) \=> any) | null;  
    [onerror](#onerror): ((this: SourceBuffer, ev: Event) \=> any) | null;  
    [onupdate](#onupdate): ((this: SourceBuffer, ev: Event) \=> any) | null;  
    [onupdateend](#onupdateend): ((this: SourceBuffer, ev: Event) \=> any) | null;  
    [onupdatestart](#onupdatestart): ((this: SourceBuffer, ev: Event) \=> any) | null;  
    [timestampOffset](#timestampoffset): number;  
    [updating](#updating): boolean;  
    [abort](#abort-1)(): void;  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [SourceBufferEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: SourceBuffer, ev: [SourceBufferEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferEventMap/)\[[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;  
    [appendBuffer](#appendbuffer-1)(data: [BufferSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BufferSource/)): void;  
    [changeType](#changetype-1)(type: string): void;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [remove](#remove-1)(start: number, end: number): void;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [SourceBufferEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: SourceBuffer, ev: [SourceBufferEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SourceBufferEventMap/)\[[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;  
}

#### Hierarchy

-   EventTarget
    -   SourceBuffer

##### Index

### Properties[](#properties)

[appendWindowEnd](#appendwindowend) [appendWindowStart](#appendwindowstart) [buffered](#buffered) [mode](#mode) [onabort](#onabort) [onerror](#onerror) [onupdate](#onupdate) [onupdateend](#onupdateend) [onupdatestart](#onupdatestart) [timestampOffset](#timestampoffset) [updating](#updating)

### Methods[](#methods)

[abort](#abort) [addEventListener](#addeventlistener) [appendBuffer](#appendbuffer) [changeType](#changetype) [dispatchEvent](#dispatchevent) [remove](#remove) [removeEventListener](#removeeventlistener)

## Properties[](#properties-1)

### appendWindowEnd[](#appendwindowend)

appendWindowEnd: number

The **`appendWindowEnd`** property of the SourceBuffer interface controls the timestamp for the end of the append window, a timestamp range that can be used to filter what media data is appended to the SourceBuffer. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.

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

### appendWindowStart[](#appendwindowstart)

appendWindowStart: number

The **`appendWindowStart`** property of the SourceBuffer interface controls the timestamp for the start of the append window, a timestamp range that can be used to filter what media data is appended to the SourceBuffer. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.

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

### `Readonly`buffered[](#buffered)

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

The **`buffered`** read-only property of the SourceBuffer interface returns the time ranges that are currently buffered in the SourceBuffer as a normalized TimeRanges object.

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

### mode[](#mode)

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

The **`mode`** property of the SourceBuffer interface controls whether media segments can be appended to the SourceBuffer in any order, or in a strict sequence.

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

### onabort[](#onabort)

onabort: ((this: SourceBuffer, ev: Event) \=> any) | null

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

### onerror[](#onerror)

onerror: ((this: SourceBuffer, ev: Event) \=> any) | null

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

### onupdate[](#onupdate)

onupdate: ((this: SourceBuffer, ev: Event) \=> any) | null

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

### onupdateend[](#onupdateend)

onupdateend: ((this: SourceBuffer, ev: Event) \=> any) | null

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

### onupdatestart[](#onupdatestart)

onupdatestart: ((this: SourceBuffer, ev: Event) \=> any) | null

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

### timestampOffset[](#timestampoffset)

timestampOffset: number

The **`timestampOffset`** property of the SourceBuffer interface controls the offset applied to timestamps inside media segments that are appended to the SourceBuffer.

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

### `Readonly`updating[](#updating)

updating: boolean

The **`updating`** read-only property of the SourceBuffer interface indicates whether the SourceBuffer is currently being updated — i.e., whether an appendBuffer() or remove() operation is currently in progress.

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

## Methods[](#methods-1)

### abort[](#abort)

-   abort(): void[](#abort-1)
    
    The **`abort()`** method of the SourceBuffer interface aborts the current segment and resets the segment parser.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SourceBuffer/abort)
    
    #### Returns void
    

### addEventListener[](#addeventlistener)

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

### appendBuffer[](#appendbuffer)

-   appendBuffer(data: [BufferSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BufferSource/)): void[](#appendbuffer-1)
    
    The **`appendBuffer()`** method of the SourceBuffer interface appends media segment data from an ArrayBuffer, a TypedArray or a DataView object to the SourceBuffer.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SourceBuffer/appendBuffer)
    
    #### Parameters
    
    -   data: [BufferSource](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BufferSource/)
    
    #### Returns void
    

### changeType[](#changetype)

-   changeType(type: string): void[](#changetype-1)
    
    The **`changeType()`** method of the SourceBuffer interface sets the MIME type that future calls to appendBuffer() should expect the new media data to conform to. This makes it possible to change codecs or container type mid-stream.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SourceBuffer/changeType)
    
    #### Parameters
    
    -   type: string
    
    #### 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
    

### remove[](#remove)

-   remove(start: number, end: number): void[](#remove-1)
    
    The **`remove()`** method of the SourceBuffer interface removes media segments within a specific time range from the SourceBuffer. This method can only be called when SourceBuffer.updating equals false. If SourceBuffer.updating is not equal to false, call SourceBuffer.abort().
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SourceBuffer/remove)
    
    #### Parameters
    
    -   start: number
    -   end: number
    
    #### Returns void
    

### removeEventListener[](#removeeventlistener)

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