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

The **`MIDIPort`** interface of the Web MIDI API represents a MIDI input or output port. Available only in secure contexts.

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

interface MIDIPort {  
    [connection](#connection): [MIDIPortConnectionState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.MIDIPortConnectionState/);  
    [id](#id): string;  
    [manufacturer](#manufacturer): string | null;  
    [name](#name): string | null;  
    [onstatechange](#onstatechange): ((this: MIDIPort, ev: [MIDIConnectionEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MIDIConnectionEvent/)) \=> any) | null;  
    [state](#state): [MIDIPortDeviceState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.MIDIPortDeviceState/);  
    [type](#type): [MIDIPortType](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.MIDIPortType/);  
    [version](#version): string | null;  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends "statechange"\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: MIDIPort, ev: [MIDIPortEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MIDIPortEventMap/)\[[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;  
    [close](#close-1)(): Promise<MIDIPort\>;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [open](#open-1)(): Promise<MIDIPort\>;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends "statechange"\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: MIDIPort, ev: [MIDIPortEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MIDIPortEventMap/)\[[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
    -   MIDIPort

##### Index

### Properties[](#properties)

[connection](#connection) [id](#id) [manufacturer](#manufacturer) [name](#name) [onstatechange](#onstatechange) [state](#state) [type](#type) [version](#version)

### Methods[](#methods)

[addEventListener](#addeventlistener) [close](#close) [dispatchEvent](#dispatchevent) [open](#open) [removeEventListener](#removeeventlistener)

## Properties[](#properties-1)

### `Readonly`connection[](#connection)

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

The **`connection`** read-only property of the MIDIPort interface returns the connection state of the port.

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

### `Readonly`id[](#id)

id: string

The **`id`** read-only property of the MIDIPort interface returns the unique ID of the port.

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

### `Readonly`manufacturer[](#manufacturer)

manufacturer: string | null

The **`manufacturer`** read-only property of the MIDIPort interface returns the manufacturer of the port.

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

### `Readonly`name[](#name)

name: string | null

The **`name`** read-only property of the MIDIPort interface returns the system name of the port.

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

### onstatechange[](#onstatechange)

onstatechange: ((this: MIDIPort, ev: [MIDIConnectionEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MIDIConnectionEvent/)) \=> any) | null

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

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

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

The **`state`** read-only property of the MIDIPort interface returns the state of the port.

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

### `Readonly`type[](#type)

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

The **`type`** read-only property of the MIDIPort interface returns the type of the port, indicating whether this is an input or output MIDI port.

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

### `Readonly`version[](#version)

version: string | null

The **`version`** read-only property of the MIDIPort interface returns the version of the port.

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

## Methods[](#methods-1)

### addEventListener[](#addeventlistener)

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

### close[](#close)

-   close(): Promise<MIDIPort\>[](#close-1)
    
    The **`close()`** method of the MIDIPort interface makes the access to the MIDI device connected to this MIDIPort unavailable.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/MIDIPort/close)
    
    #### Returns Promise<MIDIPort\>
    

### 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
    

### open[](#open)

-   open(): Promise<MIDIPort\>[](#open-1)
    
    The **`open()`** method of the MIDIPort interface makes the MIDI device connected to this MIDIPort explicitly available.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/MIDIPort/open)
    
    #### Returns Promise<MIDIPort\>
    

### removeEventListener[](#removeeventlistener)

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