{"_id":"@derccl/ngx-audio-player","name":"@derccl/ngx-audio-player","dist-tags":{"latest":"18.2.8"},"versions":{"18.2.8":{"name":"@derccl/ngx-audio-player","version":"18.2.8","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/mkccl/ngx-audio-player.git"},"author":{"name":"Michael 'ccl' Krause","email":"michael.krause@e-mail.de","url":"https://www.ccl-dev.com"},"keywords":["ngx","audio","player","angular","angular7","angular8","angular9","angular10","angular11","angular12","angular18","audio player","angular audio player","audio player with playlist","material style audio player","material style basic audio player","material style advanced audio player"],"license":"MIT","licenses":[{"type":"MIT","url":"https://github.com/mkccl/ngx-audio-player/blob/master/projects/ngx-audio-player/LICENSE"}],"bugs":{"url":"https://github.com/mkccl/ngx-audio-player/issues"},"peerDependencies":{"@angular/common":"^18.2.8","@angular/core":"^18.2.8","@angular/material":"^18.2.8","rxjs":"^6.6.7"},"dependencies":{"tslib":"^2.6.2"},"module":"fesm2022/derccl-ngx-audio-player.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/derccl-ngx-audio-player.mjs","esm":"./esm2022/derccl-ngx-audio-player.mjs","default":"./fesm2022/derccl-ngx-audio-player.mjs"}},"sideEffects":false,"_id":"@derccl/ngx-audio-player@18.2.8","gitHead":"742e99a08684b52dda2580c604e697ba7ecf305b","description":"A library for loading and playing audio using HTML 5 for Angular 7/8/9/10/11/12.   (https://mudigal-technologies.github.io/ngx-audio-player/)","homepage":"https://github.com/mkccl/ngx-audio-player#readme","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-NPvTACoaIT8GyEaRFQHHQAtAwB0p3X5JkaKffsdN0SHbdw4xN/XpGN1uR4PT9p1woOoc36O6z85jKSTPk8CRmw==","shasum":"76645503472e7156ce00c71d4d25928c25a25989","tarball":"https://registry.npmjs.org/@derccl/ngx-audio-player/-/ngx-audio-player-18.2.8.tgz","fileCount":19,"unpackedSize":283129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrjSePbSDv6JDU3+3OvPftfvm/ZAvCjx3LHDx2SejqGAiA2KfdynItkym8rF5UAH8ED31oprAviSI7KumFKbAgBEA=="}]},"_npmUser":{"name":"derccl","email":"michael.krause@e-mail.de"},"directories":{},"maintainers":[{"name":"derccl","email":"michael.krause@e-mail.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-audio-player_18.2.8_1728756887538_0.47679647263583336"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-12T18:14:47.435Z","18.2.8":"2024-10-12T18:14:47.728Z","modified":"2024-10-12T18:14:47.990Z"},"maintainers":[{"name":"derccl","email":"michael.krause@e-mail.de"}],"description":"A library for loading and playing audio using HTML 5 for Angular 7/8/9/10/11/12.   (https://mudigal-technologies.github.io/ngx-audio-player/)","homepage":"https://github.com/mkccl/ngx-audio-player#readme","keywords":["ngx","audio","player","angular","angular7","angular8","angular9","angular10","angular11","angular12","angular18","audio player","angular audio player","audio player with playlist","material style audio player","material style basic audio player","material style advanced audio player"],"repository":{"type":"git","url":"git+https://github.com/mkccl/ngx-audio-player.git"},"author":{"name":"Michael 'ccl' Krause","email":"michael.krause@e-mail.de","url":"https://www.ccl-dev.com"},"bugs":{"url":"https://github.com/mkccl/ngx-audio-player/issues"},"license":"MIT","readme":"\nA library for loading and playing audio using HTML 5 for Angular 7/8/9/10/11/12.  \n(https://mudigal-technologies.github.io/ngx-audio-player/)\n\n\n[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg?colorB=orange)](https://mudigal-technologies.github.io/ngx-audio-player/) [![npm version](https://img.shields.io/npm/v/ngx-audio-player.svg?colorB=red)](https://www.npmjs.com/package/ngx-audio-player) [![Downloads](https://img.shields.io/npm/dm/ngx-audio-player.svg?colorB=48C9B0)](https://www.npmjs.com/package/ngx-audio-player) [![licence](https://img.shields.io/npm/l/ngx-audio-player.svg?colorB=yellow)](https://www.npmjs.com/package/ngx-audio-player) [![Support](https://img.shields.io/badge/support-Angular%207%2B-blue.svg)](https://www.npmjs.com/package/ngx-audio-player/v/7.2.0) [![Support](https://img.shields.io/badge/support-Angular%208+-brown.svg)](https://www.npmjs.com/package/ngx-audio-player/v/8.1.4) [![Support](https://img.shields.io/badge/support-Angular%209+-black.svg)](https://www.npmjs.com/package/ngx-audio-player/v/9.2.3) [![Support](https://img.shields.io/badge/support-Angular%2010+-teal.svg)](https://www.npmjs.com/package/ngx-audio-player/v/10.1.4) [![Support](https://img.shields.io/badge/support-Angular%2011+-grey.svg)](https://www.npmjs.com/package/ngx-audio-player/v/11.0.4) [![Support](https://img.shields.io/badge/support-Angular%2012+-indigo.svg)](https://www.npmjs.com/package/ngx-audio-player/v/12.0.0)\n\n## Table of contents\n\n- [Demo](#demo)\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n- [Versioning](#versioning)\n- [Contributors](#contributors)\n- [License](#license)\n\n## Demo\n\nA simple, clean, responsive player for playing multiple audios with playlist support.\n\n![alt tag](https://github.com/mudigal-technologies/ngx-audio-player/blob/master/docs/images/advanced-player.png?raw=true)\n\n[Working Demo](https://mudigal-technologies.github.io/ngx-audio-player/)\n\n## Installation\n\n`ngx-audio-player` is available via [npm](https://www.npmjs.com/package/ngx-audio-player) and [yarn](https://yarnpkg.com/en/package/ngx-audio-player)\n\nUsing npm:\n```bash\n$ npm install ngx-audio-player --save\n```\n\nUsing yarn:\n```bash\n$ yarn add ngx-audio-player\n```\n\n## Getting Started\n\nNgxAudioPlayerModule needs Angular Material.   \nMake sure you have installed below dependencies with same or higher version than mentioned.   \n\n\"@angular/common\": \"^18.2.8\",\n\"@angular/core\": \"^18.2.8\",\n\"@angular/material\": \"^18.2.8\",\n\"rxjs\": \"^6.6.7\"\n   \nImport `NgxAudioPlayerModule` in the root module(`AppModule`):   \n   \n```typescript   \n// Import library module\nimport { NgxAudioPlayerModule } from 'ngx-audio-player';\n\n@NgModule({\n  imports: [\n    // ...\n    NgxAudioPlayerModule\n  ]\n})\nexport class AppModule { }\n```\n   \n### Usage \n\n#### Simple Audio Player\n   \n##### HTML   \n\n```html\n<ngx-audio-player [autoPlay]=\"false\" muted=\"muted\"\n    \n  [playlist]=\"mssapPlaylist\"\n  [disablePositionSlider]=\"mssapDisablePositionSlider\"\n  [displayRepeatControls]=\"mssapDisplayRepeatControls\"\n  [displayVolumeControls]=\"mssapDisplayVolumeControls\"\n  [displayVolumeSlider]=\"mssapDisplayVolumeSlider\"\n\n  [displayTitle]=\"mssapDisplayTitle\"\n  \n  (trackEnded)=\"onEnded($event)\">\n\n</ngx-audio-player> \n```\n   \n##### TS   \n\n```ts\nimport { Track } from 'ngx-audio-player';   \n   \n.   \n.   \n\nmssapDisplayTitle = true;\nmssapDisablePositionSlider = true;\nmssapDisplayRepeatControls = true;\nmssapDisplayVolumeControls = true;\nmssapDisplayVolumeSlider = false;\n   \n// Material Style Simple Audio Player\nmssapPlaylist: Track[] = [\n  {\n    title: 'Audio Title',\n    link: 'Link to Audio URL',\n    artist: 'Audio Artist',\n    duration: 'Audio Duration in seconds'\n  }\n];\n\n// For Streaming Audio From URL \n// set mediaType = 'stream' \nmssapPlaylist: Track[] = [\n  {\n    title: 'Audio Title',\n    link: 'Link to Streaming URL',\n    mediaType: 'stream'\n  }\n];\n```  \n\n#### Advanced Audio Player\n   \n##### HTML   \n\n```html\n<ngx-audio-player [autoPlay]=\"false\" muted=\"muted\"\n\n    [playlist]=\"msaapPlaylist\"\n    [disablePositionSlider]=\"msaapDisablePositionSlider\"\n    [displayRepeatControls]=\"msaapDisplayRepeatControls\"\n    [displayVolumeControls]=\"msaapDisplayVolumeControls\"\n    [displayVolumeSlider]=\"msaapDisplayVolumeSlider\"\n    \n    [displayTitle]=\"msaapDisplayTitle\"\n\n    [displayPlaylist]=\"msaapDisplayPlayList\"\n    [pageSizeOptions]=\"msaapPageSizeOptions\"\n\n    [tableHeader]=\"msaapTableHeader\"\n    [titleHeader]=\"msaapTitleHeader\"\n    [artistHeader]=\"msaapArtistHeader\"\n    [durationHeader]=\"msaapDurationHeader\"\n\n    [displayArtist]=\"msaapDisplayArtist\"\n    [displayDuration]=\"msaapDisplayDuration\"\n    [expanded]=\"true\"\n\n    (trackPlaying)=\"onTrackPlaying($event)\"\n    (trackPaused)=\"onTrackPaused($event)\"\n    (trackEnded)=\"onEnded($event)\"\n    (nextTrackRequested)=\"onNextTrackRequested($event)\"\n    (previousTrackRequested)=\"onPreviousTrackRequested($event)\"\n    (trackSelected)=\"onTrackSelected($event)\">\n\n</ngx-audio-player>\n```\n   \n##### TS   \n\n```ts\nimport { Track } from 'ngx-audio-player';   \n   \n.   \n.   \n\n// Main Player Controls\nmsaapDisplayPlayList = true;\nmsaapDisablePositionSlider = true;\nmsaapDisplayRepeatControls = true;\nmsaapDisplayVolumeControls = true;\nmsaapDisplayVolumeSlider = false;\n\n// Title Marquee\nmsaapDisplayTitle = true;\n\n// Playlist Controls\nmsaapPageSizeOptions = [2,4,6];\nmsaapDisplayArtist = false;\nmsaapDisplayDuration = false;\n\n// For Localisation\nmsaapTableHeader = 'My Playlist';\nmsaapTitleHeader = 'My Title';\nmsaapArtistHeader = 'My Artist';\nmsaapDurationHeader = 'My Duration';\n\n\n// Material Style Advance Audio Player Playlist\nmsaapPlaylist: Track[] = [\n    {\n        title: 'Audio One Title',\n        link: 'Link to Audio One URL',\n        artist: 'Artist',\n        duration: 'Duration'\n    },\n    {\n        title: 'Audio Two Title',\n        link: 'Link to Audio Two URL',\n        artist: 'Artist',\n        duration: 'Duration'\n    },\n    {\n        title: 'Audio Three Title',\n        link: 'Link to Audio Three URL',\n        artist: 'Artist',\n        duration: 'Duration'\n    },\n];\n\n// Callback Events\n\nonTrackPlaying(event) {\n    console.log(event);\n    // your logic which needs to\n    // be triggered once the\n    // track ends goes here.\n}\n\n\nonTrackPaused(event) {\n    console.log(event);\n    // your logic which needs to\n    // be triggered once the\n    // track ends goes here.\n}\n\nonEnded(event) {\n    console.log(event);\n    // your logic which needs to\n    // be triggered once the\n    // track ends goes here.\n}\n\nonNextTrackRequested(event) {\n    console.log(event);\n    // your logic which needs to\n    // be triggered once the\n    // track ends goes here.\n}\n\n\nonPreviousTrackRequested(event) {\n    console.log(event);\n    // your logic which needs to\n    // be triggered once the\n    // track ends goes here.\n}\n\nonTrackSelected(event) {\n    console.log(event);\n    // your logic which needs to\n    // be triggered once the\n    // track ends goes here.\n}\n```   \n\n##### Properties   \n\n| Name                                                            | Description                                         | Type      | \n|-----------------------------------------------------------------|-----------------------------------------------------|-----------|\n| @Input() playlist: Track[];                                     | playlist containing array of title and link         | mandatory |\n| @Input() autoPlay: false;                                       | true - if the audio needs to be played automaticlly | optional  |\n|  Player Controls                                                                                                                  |\n| @Input() startOffset = 0;                                       | offset from start of audio file in seconds          | optional  |\n| @Input() endOffset = 0;                                         | offset from end of audio file in seconds            | optional  |\n| @Input() disablePositionSlider = false;                         | true - if the position slider needs to be disabled  | optional  |\n| @Input() displayRepeatControls = true;                          | false - if the repeat controls needs to be hidden   | optional  |\n| @Input() repeat: \"all\" | \"one\" | \"none\" = 'all';                | repeat all or one or none                           | optional  |\n| @Input() displayVolumeControls = true;                          | false - if the volume controls needs to be hidden   | optional  |\n| @Input() displayVolumeSlider = true;                            | true - if the volume slider should be shown         | optional  |\n|  Title Marquee Control                                                                                                            |\n| @Input() displayTitle: true;                                    | false - if the audio title needs to be hidden       | optional  |\n|  Playlist Controls                                                                                                                |\n| @Input() displayPlaylist: true;                                 | false - if the playlist needs to be hidden          | optional  |\n| @Input() pageSizeOptions = [10, 20, 30];                        | number of items to be displayed in the playlist     | optional  |\n| @Input() expanded = true;                                       | false - if the playlist needs to be minimized       | optional  |\n| @Input() displayArtist = false;                                 | true - if the artist data is to be shown            | optional  |\n| @Input() displayDuration = false;                               | true - if the track duration is to be shown         | optional  |\n|  Localisation Controls                                                                                                            |\n| @Input() tableHeader = 'Playlist';                              | localised string                                    | optional  |\n| @Input() titleHeader = 'Title';                                 | localised string                                    | optional  |\n| @Input() artistHeader = 'Artist';                               | localised string                                    | optional  |\n| @Input() durationHeader = 'Duration';                           | localised string                                    | optional  |\n|  Callback Events                                                                                                                  |\n| @Output() trackPlaying: EventEmitter<EventResponse>             | triggers when the track starts playing              | optional  |\n| @Output() trackPaused: EventEmitter<EventResponse>              | Callback method that triggers once the track ends   | optional  |\n| @Output() trackEnded: EventEmitter<EventResponse>               | Callback method that triggers once the track ends   | optional  |\n| @Output() nextTrackRequested: EventEmitter<EventResponse>       | Callback method that triggers once the track ends   | optional  |\n| @Output() previousTrackRequested: EventEmitter<EventResponse>   | Callback method that triggers once the track ends   | optional  |\n| @Output() trackSelected: EventEmitter<EventResponse>            | Callback method that triggers once the track ends   | optional  |\n \n\n## Versioning\n\nngx-audio-player will be maintained under the Semantic Versioning guidelines.\nReleases will be numbered with the following format:\n\n`<major>.<minor>.<patch>`\n\nFor more information on SemVer, please visit http://semver.org.\n\n## Contributors ✨   \n\nThanks goes to these wonderful people:   \n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->   \n\n<table align=\"center\">\n    <tr>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/EdricChan03\" target=\"_blank\">\n                <img alt=\"\" src=\"https://avatars.githubusercontent.com/u/20047125?v=4\" width=\"100px;\" />\n                <br /><sub><b>Edric Chan</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=EdricChan03\"\n                title=\"Code\">💻</a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/RokiFoki\" target=\"_blank\">\n                <img alt=\"\" src=\"https://avatars3.githubusercontent.com/u/9476596?v=4\" width=\"100px;\" />\n                <br /><sub><b>RokiFoki</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=RokiFoki\"\n                title=\"Code\">💻</a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/ewwwgiddings\" target=\"_blank\">\n                <img alt=\"\" src=\"https://avatars.githubusercontent.com/u/26286559?v=4\" width=\"100px;\" />\n                <br /><sub><b>ewwwgiddings</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=ewwwgiddings\"\n                title=\"Documentation\">📖</a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/cicsolutions\">\n                <img alt=\"\" src=\"https://avatars1.githubusercontent.com/u/5200361?v=4\" width=\"100px;\" />\n                <br /><sub><b>Caleb Crosby</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=cicsolutions\"\n                title=\"Code\">💻\n            </a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/6utt3rfly\">\n                <img alt=\"\" src=\"https://avatars1.githubusercontent.com/u/17912877?v=4\" width=\"100px;\" />\n                <br /><sub><b>Shelly</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=6utt3rfly\"\n                title=\"Code\">💻\n            </a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/Urinprobe\">\n                <img alt=\"\" src=\"https://avatars1.githubusercontent.com/u/22059384?v=4\" width=\"100px;\" />\n                <br /><sub><b>Simon Reinsch</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=Urinprobe\"\n                title=\"Code\">💻\n            </a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/AnwarTuha\">\n                <img alt=\"\" src=\"https://avatars.githubusercontent.com/u/28872106?v=4\" width=\"100px;\" />\n                <br /><sub><b>AnwarTuha</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=AnwarTuha\"\n                title=\"Code\">💻\n            </a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/bogdanbaghiu\">\n                <img alt=\"\" src=\"https://avatars.githubusercontent.com/u/37840937?v=4\" width=\"100px;\" />\n                <br /><sub><b>Bogdan Baghiu</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=bogdanbaghiu\"\n                title=\"Code\">💻\n            </a>\n        </td>\n        <td align=\"center\">\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/kareemjeiroudi\">\n                <img alt=\"\" src=\"https://avatars.githubusercontent.com/u/39561669?v=4\" width=\"100px;\" />\n                <br /><sub><b>Kareem Jeiroudi</b></sub>\n            </a><br />\n            <a target=\"_blank\" rel=\"noopener noreferrer\"\n                href=\"https://github.com/mudigal-technologies/ngx-audio-player/commits?author=kareemjeiroudi\"\n                title=\"Code\">💻\n            </a>\n        </td>\n    </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\n## Misc\n\n\n## License\n\n##### The MIT License (MIT)\n\n## Donate\n\nIf you like my work you can buy me a :beer: or :pizza:\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/mudigal)\n","readmeFilename":"README.md"}