# capacitor-media-session
A Capacitor plugin that enables Android MediaSession controls with lock screen and background playback support.
## Install
```bash
npm install @srikarthiks/capacitor-media-session
npx cap sync
```
## API
* [`setMetadata(...)`](#setmetadata)
* [`setPlaybackState(...)`](#setplaybackstate)
* [`setPositionState(...)`](#setpositionstate)
* [`setActionHandler(...)`](#setactionhandler)
* [Interfaces](#interfaces)
### setMetadata(...)
```typescript
setMetadata(options: { title?: string; artist?: string; album?: string; artwork?: Array<{ src: string; sizes?: string; type?: string; }>; }) => Promise
```
| Param | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **`options`** | { title?: string; artist?: string; album?: string; artwork?: { src: string; sizes?: string; type?: string; }[]; } |
--------------------
### setPlaybackState(...)
```typescript
setPlaybackState(options: { playbackState: 'none' | 'playing' | 'paused'; }) => Promise
```
| Param | Type |
| ------------- | ---------------------------------------------------------------- |
| **`options`** | { playbackState: 'none' \| 'paused' \| 'playing'; } |
--------------------
### setPositionState(...)
```typescript
setPositionState(options: { duration?: number; position?: number; playbackRate?: number; }) => Promise
```
| Param | Type |
| ------------- | ----------------------------------------------------------------------------- |
| **`options`** | { duration?: number; position?: number; playbackRate?: number; } |
--------------------
### setActionHandler(...)
```typescript
setActionHandler(options: { action: 'previoustrack' | 'seekbackward' | 'play' | 'pause' | 'seekforward' | 'nexttrack' | 'seekto' | 'stop'; }) => Promise
```
| Param | Type |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| **`options`** | { action: 'stop' \| 'pause' \| 'play' \| 'previoustrack' \| 'seekbackward' \| 'seekforward' \| 'nexttrack' \| 'seekto'; } |
--------------------
### Interfaces
#### Array
| Prop | Type | Description |
| ------------ | ------------------- | ------------------------------------------------------------------------------------------------------ |
| **`length`** | number | Gets or sets the length of the array. This is a number one higher than the highest index in the array. |
| Method | Signature | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **toString** | () => string | Returns a string representation of an array. |
| **toLocaleString** | () => string | Returns a string representation of an array. The elements are converted to string using their toLocalString methods. |
| **pop** | () => T \| undefined | Removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified. |
| **push** | (...items: T[]) => number | Appends new elements to the end of an array, and returns the new length of the array. |
| **concat** | (...items: ConcatArray<T>[]) => T[] | Combines two or more arrays. This method returns a new array without modifying any existing arrays. |
| **concat** | (...items: (T \| ConcatArray<T>)[]) => T[] | Combines two or more arrays. This method returns a new array without modifying any existing arrays. |
| **join** | (separator?: string \| undefined) => string | Adds all the elements of an array into a string, separated by the specified separator string. |
| **reverse** | () => T[] | Reverses the elements in an array in place. This method mutates the array and returns a reference to the same array. |
| **shift** | () => T \| undefined | Removes the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified. |
| **slice** | (start?: number \| undefined, end?: number \| undefined) => T[] | Returns a copy of a section of an array. For both start and end, a negative index can be used to indicate an offset from the end of the array. For example, -2 refers to the second to last element of the array. |
| **sort** | (compareFn?: ((a: T, b: T) => number) \| undefined) => this | Sorts an array in place. This method mutates the array and returns a reference to the same array. |
| **splice** | (start: number, deleteCount?: number \| undefined) => T[] | Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements. |
| **splice** | (start: number, deleteCount: number, ...items: T[]) => T[] | Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements. |
| **unshift** | (...items: T[]) => number | Inserts new elements at the start of an array, and returns the new length of the array. |
| **indexOf** | (searchElement: T, fromIndex?: number \| undefined) => number | Returns the index of the first occurrence of a value in an array, or -1 if it is not present. |
| **lastIndexOf** | (searchElement: T, fromIndex?: number \| undefined) => number | Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present. |
| **every** | <S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any) => this is S[] | Determines whether all the members of an array satisfy the specified test. |
| **every** | (predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any) => boolean | Determines whether all the members of an array satisfy the specified test. |
| **some** | (predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any) => boolean | Determines whether the specified callback function returns true for any element of an array. |
| **forEach** | (callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any) => void | Performs the specified action for each element in an array. |
| **map** | <U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any) => U[] | Calls a defined callback function on each element of an array, and returns an array that contains the results. |
| **filter** | <S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any) => S[] | Returns the elements of an array that meet the condition specified in a callback function. |
| **filter** | (predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any) => T[] | Returns the elements of an array that meet the condition specified in a callback function. |
| **reduce** | (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T) => T | Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function. |
| **reduce** | (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T) => T | |
| **reduce** | <U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U) => U | Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function. |
| **reduceRight** | (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T) => T | Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function. |
| **reduceRight** | (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T) => T | |
| **reduceRight** | <U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U) => U | Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function. |
#### ConcatArray
| Prop | Type |
| ------------ | ------------------- |
| **`length`** | number |
| Method | Signature |
| --------- | ------------------------------------------------------------------ |
| **join** | (separator?: string \| undefined) => string |
| **slice** | (start?: number \| undefined, end?: number \| undefined) => T[] |
## Usage
```typescript
import { MediaSession } from 'capacitor-media-session';
// Set media metadata
await MediaSession.setMetadata({
title: 'Song Title',
artist: 'Artist Name',
album: 'Album Name',
artwork: [
{
src: 'https://example.com/artwork.jpg',
sizes: '512x512',
type: 'image/jpeg'
}
]
});
// Set playback state
await MediaSession.setPlaybackState({
playbackState: 'playing' // or 'paused' or 'none'
});
// Set position state
await MediaSession.setPositionState({
duration: 180, // duration in seconds
position: 45, // current position in seconds
playbackRate: 1.0
});
// Handle media controls
await MediaSession.setActionHandler({
action: 'play'
});
// Listen for media control events
MediaSession.addListener('play', () => {
// Handle play action
});
MediaSession.addListener('pause', () => {
// Handle pause action
});
MediaSession.addListener('previoustrack', () => {
// Handle previous track action
});
MediaSession.addListener('nexttrack', () => {
// Handle next track action
});
MediaSession.addListener('seekto', (data) => {
// Handle seek action
const seekTime = data.seekTime;
// Update player position
});
```
## Testing
To test the implementation:
1. Build and run your app on an Android device
2. Start playing media content
3. Verify that:
- Lock screen shows media controls
- Notification shows media controls
- Background playback works
- All media controls (play, pause, next, previous) work
- Artwork and metadata are displayed correctly
## Platform Support
- ✅ Android
- ✅ Web
- ⏳ iOS (Coming soon)