https://github.com/kamal-dev1/ngx-pro-media-player
https://github.com/kamal-dev1/ngx-pro-media-player
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kamal-dev1/ngx-pro-media-player
- Owner: kamal-dev1
- Created: 2026-05-13T06:27:03.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2026-05-13T07:31:26.000Z (29 days ago)
- Last Synced: 2026-05-13T09:15:02.620Z (29 days ago)
- Language: TypeScript
- Size: 320 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-pro-media-player - Angular media player with audio, video, queue, crossfade, lyrics, and RTL support. (Third Party Components / Media)
- awesome-angular - ngx-pro-media-player - Angular media player with audio, video, queue, crossfade, lyrics, and RTL support. (Third Party Components / Media)
README
# ng-media-player
A lightweight Angular media player with audio, video, queue, crossfade, lyrics, and RTL support — built with Angular Signals, no extra dependencies.
🔴 [Live Demo](https://kamal-dev1.github.io/ngx-pro-media-player/)
---
## Installation
```bash
npm install ngx-pro-media-player @angular/cdk
```
---
## Usage
Import the component:
```typescript
import { NgxMediaPlayer } from 'ngx-pro-media-player';
@Component({
imports: [NgxMediaPlayer],
})
export class AppComponent {}
```
Add to your template:
```html
```
Pass a single track as a one-item array:
```html
```
---
## Inputs
| Input | Type | Default | Description |
|---|---|---|---|
| `mediaList` | `MediaItem[]` | `[]` | List of tracks / single track |
| `language` | `'en' \| 'fa'` | `'fa'` | UI language |
| `direction` | `'ltr' \| 'rtl'` | `'rtl'` | Text direction |
---
## MediaItem
```typescript
interface MediaItem {
id: string;
title: string;
artist?: string;
album?: string;
cover?: string;
poster?: string; // video poster
url: string;
type: 'audio' | 'video';
duration?: number;
lyrics?: LyricLine[];
}
interface LyricLine {
time: number; // seconds
text: string;
}
```
---
## Example
```typescript
const tracks: MediaItem[] = [
{
id: '1',
title: 'Track One',
artist: 'Artist A',
cover: 'https://example.com/cover.jpg',
url: 'https://example.com/track1.mp3',
type: 'audio',
},
{
id: '2',
title: 'My Video',
url: 'https://example.com/video.mp4',
poster: 'https://example.com/poster.jpg',
type: 'video',
},
];
```
---
## Features
- 🎵 Audio & 🎬 Video playback
- 🔀 Shuffle & 🔁 Repeat (off / all / one)
- ⏭ Queue with drag-and-drop reorder
- 🌊 Crossfade between tracks
- 📜 Lyrics panel
- 🌐 RTL & LTR support
- 📶 Buffer progress bar
- ⌨️ Media Session API (OS lock screen controls)
---
## Support
If this project saved you some time, consider buying me a coffee ☕
[](https://paypal.me/your-username)