# @khajegan/ngx-audio-player > Angular 17 ngx-audio-player Latest version **17.1.0** (published 2023-12-24) · MIT license · 0 weekly downloads ## Install ```sh npm install @khajegan/ngx-audio-player pnpm add @khajegan/ngx-audio-player yarn add @khajegan/ngx-audio-player bun add @khajegan/ngx-audio-player ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 17.1.0 | | Published | 2023-12-24 | | First published | 2022-11-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 229.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Amir Hossein Khajegan | | Maintainers | autoaly, mousazadeh, khajegan | | Keywords | ngx, audio, player, angular, angular14, angular15, angular16, angular17, audio player, angular audio player, audio player with playlist, material style audio player, material style basic audio player, material style advanced audio player | ## Links - npm: https://www.npmjs.com/package/@khajegan/ngx-audio-player - Repository: https://github.com/khajegan/ngx-audio-player - Homepage: https://github.com/khajegan/ngx-audio-player#readme - Issues: https://github.com/khajegan/ngx-audio-player/issues - npm.io page: https://npm.io/package/@khajegan/ngx-audio-player ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.3.0 ## Recent versions - 17.1.0 (latest) — 2023-12-24 - 17.0.7 — 2023-12-23 - 17.0.6 — 2023-12-23 - 17.0.5 — 2023-12-23 - 17.0.4 — 2023-12-23 - 17.0.3 — 2023-12-23 - 17.0.2 — 2023-12-23 - 17.0.1 — 2023-12-20 - 17.0.0 — 2023-12-13 - 16.0.1 — 2023-12-13 - 16.0.0 — 2023-12-06 - 15.0.3 — 2023-12-06 - 15.0.2 — 2023-12-06 - 15.0.1 — 2023-12-06 - 15.0.0 — 2023-12-06 - … 1 more at https://npm.io/package/@khajegan/ngx-audio-player/versions ## README A library for loading and playing audio using HTML 5 for Angular 14/15/16/17. (https://github.com/khajegan/ngx-audio-player) ## Table of contents - [Demo](#demo) - [Installation](#installation) - [Getting Started](#getting-started) - [Usage](#usage) - [Versioning](#versioning) - [Contributors](#contributors) - [License](#license) ## Demo A simple, clean, responsive player for playing multiple audios with playlist support. ![alt tag](https://github.com/vmudigal/ngx-audio-player/blob/master/docs/images/advanced-player.png?raw=true) [Working Demo](https://vmudigal.github.io/ngx-audio-player/) ## Installation `ngx-audio-player` is available via [npm](https://www.npmjs.com/package/@khajegan/ngx-audio-player) Using npm: ```bash $ npm install @khajegan/ngx-audio-player --save ``` ## Getting Started NgxAudioPlayerModule needs Angular Material. Make sure you have installed below dependencies with same or higher version than mentioned. "@angular/core": "^17.0.6" "@angular/common": "^17.0.6" "@angular/material": "^17.0.4" "rxjs": "^7.8.0" Import `NgxAudioPlayerModule` in the root module(`AppModule`): ```typescript // Import library module import { NgxAudioPlayerModule } from 'ngx-audio-player'; @NgModule({ imports: [ // ... NgxAudioPlayerModule ] }) export class AppModule { } ``` ### Usage ##### HTML ```html ``` ##### TS ```ts import { Track } from 'ngx-audio-player'; . . msaapDisplayTitle = true; msaapDisplayPlayList = true; msaapPageSizeOptions = [2,4,6]; msaapDisplayVolumeControls = true; msaapDisplayRepeatControls = true; msaapDisplayArtist = false; msaapDisplayDuration = false; msaapDisablePositionSlider = true; // Material Style Advance Audio Player Playlist msaapPlaylist: Track[] = [ { title: 'Audio One Title', link: 'Link to Audio One URL', artist: 'Audio One Artist', duration: 'Audio One Duration in seconds' }, { title: 'Audio Two Title', link: 'Link to Audio Two URL', artist: 'Audio Two Artist', duration: 'Audio Two Duration in seconds' }, { title: 'Audio Three Title', link: 'Link to Audio Three URL', artist: 'Audio Three Artist', duration: 'Audio Three Duration in seconds' }, ]; ``` ##### Properties | Name | Description | Type | Default Value | |--------------------------------------------|-----------------------------------------------------|-----------|---------------| | @Input() playlist: Track[]; | playlist containing array of title and link | mandatory | None | | @Input() autoPlay: false; | true - if the audio needs to be played automaticlly | optional | false | | @Input() displayTitle: true; | false - if the audio title needs to be hidden | optional | true | | @Input() displayPlaylist: true; | false - if the playlist needs to be hidden | optional | true | | @Input() pageSizeOptions = [10, 20, 30]; | number of items to be displayed in the playlist | optional | [10,20,30] | | @Input() expanded = true; | false - if the playlist needs to be minimized | optional | true | | @Input() displayVolumeControls = true; | false - if the volume controls needs to be hidden | optional | true | | @Input() displayRepeatControls = true; | false - if the repeat controls needs to be hidden | optional | true | | @Input() displayArtist = false; | true - if the artist data is to be shown | optional | false | | @Input() displayDuration = false; | true - if the track duration is to be shown | optional | false | | @Output() trackEnded: Subject | Callback method that triggers once the track ends | optional | - N.A - | | @Input() startOffset = 0; | offset from start of audio file in seconds | optional | 0 | | @Input() endOffset = 0; | offset from end of audio file in seconds | optional | 0 | | @Input() disablePositionSlider = false; | true - if the position slider needs to be disabled | optional | false | ## Versioning ngx-audio-player will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format: `..` For more information on SemVer, please visit http://semver.org. ## License ##### The MIT License (MIT) --- _Source: https://npm.io/package/@khajegan/ngx-audio-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._