https://github.com/yanis-git/io-player
Web component - Audio player
https://github.com/yanis-git/io-player
angular audio-player webcomponent
Last synced: 5 months ago
JSON representation
Web component - Audio player
- Host: GitHub
- URL: https://github.com/yanis-git/io-player
- Owner: yanis-git
- License: mit
- Created: 2018-05-20T07:06:39.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-02T20:34:43.000Z (over 3 years ago)
- Last Synced: 2025-10-14T15:09:04.047Z (8 months ago)
- Topics: angular, audio-player, webcomponent
- Language: TypeScript
- Size: 8.86 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IoPlayer - Audio Player web component
[](https://app.netlify.com/sites/io-player/deploys)
[You can see it in action](https://unpkg.com/io-player@1.0.2/index.html)
[or even here](https://io-player.netlify.app/)
## Requirement
* Angular 13.x.x
* RxJS 7.x.x
## installation
```
yarn add io-player
npm i --save io-player
```
add to your `polyfill.ts`
```
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';
```
## Usage Example as Angular Module
On your `app.module.ts` add your import :
```
import { IoPlayerModule } from 'io-player';
// [...]
imports: [
IoPlayerModule
]
```
## Usage Example as WebComponent
Use [CDN](https://unpkg.com/io-player@1.0.2/io-player.pkg.jshttps://unpkg.com/io-player@1.0.2/io-player.pkg.js) or `io-player` package then simply consume this component as any Native DOM element
```
```
If you need to be award of progression :
```
document.querySelector('io-player').addEventListener('progression', $event => {
console.log($event);
}, true);
```
## properties :
* **src :** Link to mp3 file.
* **cover :** Link to cover image file.
* **song :** Name of the song
* **author :** Name of author.
## Event :
* **progression:** Pourcentage of current playing sound.
## Credit :
Special thanks to :
* [nitayneeman](https://github.com/nitayneeman/made-with-love) for inspiring me about how to build WebComponent.
* [Valery Alikin](https://codepen.io/AlikinVV/pen/ZxgyoE) who inspire me original design.