You can see it in action or even here
- Angular 13.x.x
- RxJS 7.x.x
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'; On your app.module.ts add your import :
import { IoPlayerModule } from 'io-player'; // [...] imports: [ IoPlayerModule ] Use CDN or io-player package then simply consume this component as any Native DOM element
<io-player src="https://cchound.ams3.digitaloceanspaces.com/Kontekst%20-%20Destiny.mp3" cover="https://78.media.tumblr.com/_1524644366_cover.png" song="Destiny" author="Kontekst" ></io-player> If you need to be award of progression :
document.querySelector('io-player').addEventListener('progression', $event => { console.log($event); }, true); - src : Link to mp3 file.
- cover : Link to cover image file.
- song : Name of the song
- author : Name of author.
- progression: Pourcentage of current playing sound.
Special thanks to :
- nitayneeman for inspiring me about how to build WebComponent.
- Valery Alikin who inspire me original design.