ang-music-player
Version:
Angular Music/Audio Player component for web applications. Easy and HIGHLY customisable.
75 lines • 8.92 kB
JavaScript
import { ViewChild, EventEmitter, Output, Component } from '@angular/core';
import { Subject } from 'rxjs';
export class AudioPlyerOptions {
constructor() {
this.currentAudioTime = 0;
this.isAudioLoaded = false;
this.isRepeat = false;
this.audioVolume = 100;
this.isAudioEnded = new Subject;
this.isMute = false;
this.playEvent = new EventEmitter();
this.pauseEvent = new EventEmitter();
}
//get audio player events
options() {
//emit event when playing audio
this.audioPlayer.nativeElement.addEventListener('playing', () => {
});
//emit when intial loading of audio
this.audioPlayer.nativeElement.addEventListener('loadeddata', () => {
this.isAudioLoaded = true;
this.getAudioLength();
});
//emit time on playing audio
this.audioPlayer.nativeElement.addEventListener('timeupdate', () => {
//get current audio time
this.currentAudioTime = Math.floor(this.audioPlayer.nativeElement.currentTime);
//check if audio is ended for next song and pass data to component
if (this.audioPlayer.nativeElement.ended) {
this.isAudioEnded.next(true);
}
});
this.audioPlayer.nativeElement.addEventListener('volumechange', () => {
this.audioVolume = Math.floor(this.audioPlayer.nativeElement.volume * 100);
if (this.audioVolume == 0) {
this.isMute = true;
}
else {
this.isMute = false;
}
});
}
play() {
//toggle play-pause button
this.isAudioPlaying = true;
//play when user click play button
setTimeout(() => {
this.audioPlayer.nativeElement.play();
this.playEvent.emit();
}, 0);
}
pause() {
//toggle play-pause button
this.isAudioPlaying = false;
//pause when user click pause button
setTimeout(() => {
this.audioPlayer.nativeElement.pause();
this.pauseEvent.emit();
}, 0);
}
getAudioLength() {
this.totalAudioLength = Math.floor(this.audioPlayer.nativeElement.duration);
}
}
AudioPlyerOptions.decorators = [
{ type: Component, args: [{
template: ''
},] }
];
AudioPlyerOptions.propDecorators = {
playEvent: [{ type: Output }],
pauseEvent: [{ type: Output }],
audioPlayer: [{ type: ViewChild, args: ['audioPlayer', { static: true },] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXVkaW9QbGF5ZXIuanMiLCJzb3VyY2VSb290IjoiRTovUFJPSkVDVFMvYW5ndWxhci1hdWRpby1wbGF5ZXIvcHJvamVjdHMvYW5nLW11c2ljLXBsYXllci9zcmMvIiwic291cmNlcyI6WyJsaWIvYXVkaW9QbGF5ZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFjLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUN0RixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBTS9CLE1BQU0sT0FBTyxpQkFBaUI7SUFKOUI7UUFNRSxxQkFBZ0IsR0FBRyxDQUFDLENBQUM7UUFDckIsa0JBQWEsR0FBWSxLQUFLLENBQUM7UUFFL0IsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixnQkFBVyxHQUFHLEdBQUcsQ0FBQztRQUNsQixpQkFBWSxHQUFHLElBQUksT0FBTyxDQUFDO1FBQzNCLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFDTCxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMvQixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQStENUMsQ0FBQztJQXhEQyx5QkFBeUI7SUFDekIsT0FBTztRQUNMLCtCQUErQjtRQUMvQixJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTLEVBQUUsR0FBRyxFQUFFO1FBQ2hFLENBQUMsQ0FBQyxDQUFDO1FBRUgsbUNBQW1DO1FBQ25DLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLFlBQVksRUFBRSxHQUFHLEVBQUU7WUFDakUsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7WUFDMUIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3hCLENBQUMsQ0FBQyxDQUFDO1FBRUgsNEJBQTRCO1FBQzVCLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLFlBQVksRUFBRSxHQUFHLEVBQUU7WUFDakUsd0JBQXdCO1lBQ3hCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQy9FLGtFQUFrRTtZQUNsRSxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRTtnQkFDeEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDOUI7UUFDSCxDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLGNBQWMsRUFBRSxHQUFHLEVBQUU7WUFDbkUsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLE1BQU0sR0FBRyxHQUFHLENBQUMsQ0FBQztZQUMzRSxJQUFJLElBQUksQ0FBQyxXQUFXLElBQUksQ0FBQyxFQUFFO2dCQUN6QixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQzthQUNwQjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQzthQUNyQjtRQUNILENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQztJQUdELElBQUk7UUFDRiwwQkFBMEI7UUFDMUIsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7UUFDM0Isa0NBQWtDO1FBQ2xDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUN0QyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNULENBQUM7SUFFRCxLQUFLO1FBQ0gsMEJBQTBCO1FBQzFCLElBQUksQ0FBQyxjQUFjLEdBQUcsS0FBSyxDQUFDO1FBQzVCLG9DQUFvQztRQUNwQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDdkMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN4QixDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDVCxDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzlFLENBQUM7OztZQTVFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLEVBQUU7YUFDYjs7O3dCQVdFLE1BQU07eUJBQ04sTUFBTTswQkFJTixTQUFTLFNBQUMsYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVsZW1lbnRSZWYsIFZpZXdDaGlsZCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXHJcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHRlbXBsYXRlOiAnJ1xyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIEF1ZGlvUGx5ZXJPcHRpb25zIHtcclxuICB0b3RhbEF1ZGlvTGVuZ3RoO1xyXG4gIGN1cnJlbnRBdWRpb1RpbWUgPSAwO1xyXG4gIGlzQXVkaW9Mb2FkZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBpc0F1ZGlvUGxheWluZzogYm9vbGVhbjtcclxuICBpc1JlcGVhdDogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIGF1ZGlvVm9sdW1lID0gMTAwO1xyXG4gIGlzQXVkaW9FbmRlZCA9IG5ldyBTdWJqZWN0O1xyXG4gIGlzTXV0ZSA9IGZhbHNlO1xyXG4gIEBPdXRwdXQoKSBwbGF5RXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIHBhdXNlRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG5cclxuICAvL0FjY2VzcyBhdWRpbyBwbGF5ZXIgZG9tXHJcbiAgQFZpZXdDaGlsZCgnYXVkaW9QbGF5ZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSBhdWRpb1BsYXllcjogRWxlbWVudFJlZjtcclxuXHJcblxyXG4gIC8vZ2V0IGF1ZGlvIHBsYXllciBldmVudHNcclxuICBvcHRpb25zKCk6IHZvaWQge1xyXG4gICAgLy9lbWl0IGV2ZW50IHdoZW4gcGxheWluZyBhdWRpb1xyXG4gICAgdGhpcy5hdWRpb1BsYXllci5uYXRpdmVFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3BsYXlpbmcnLCAoKSA9PiB7XHJcbiAgICB9KTtcclxuXHJcbiAgICAvL2VtaXQgd2hlbiBpbnRpYWwgbG9hZGluZyBvZiBhdWRpb1xyXG4gICAgdGhpcy5hdWRpb1BsYXllci5uYXRpdmVFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWRlZGRhdGEnLCAoKSA9PiB7XHJcbiAgICAgIHRoaXMuaXNBdWRpb0xvYWRlZCA9IHRydWU7XHJcbiAgICAgIHRoaXMuZ2V0QXVkaW9MZW5ndGgoKTtcclxuICAgIH0pO1xyXG5cclxuICAgIC8vZW1pdCB0aW1lIG9uIHBsYXlpbmcgYXVkaW9cclxuICAgIHRoaXMuYXVkaW9QbGF5ZXIubmF0aXZlRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCd0aW1ldXBkYXRlJywgKCkgPT4ge1xyXG4gICAgICAvL2dldCBjdXJyZW50IGF1ZGlvIHRpbWVcclxuICAgICAgdGhpcy5jdXJyZW50QXVkaW9UaW1lID0gTWF0aC5mbG9vcih0aGlzLmF1ZGlvUGxheWVyLm5hdGl2ZUVsZW1lbnQuY3VycmVudFRpbWUpO1xyXG4gICAgICAvL2NoZWNrIGlmIGF1ZGlvIGlzIGVuZGVkIGZvciBuZXh0IHNvbmcgYW5kIHBhc3MgZGF0YSB0byBjb21wb25lbnRcclxuICAgICAgaWYgKHRoaXMuYXVkaW9QbGF5ZXIubmF0aXZlRWxlbWVudC5lbmRlZCkge1xyXG4gICAgICAgIHRoaXMuaXNBdWRpb0VuZGVkLm5leHQodHJ1ZSk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMuYXVkaW9QbGF5ZXIubmF0aXZlRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCd2b2x1bWVjaGFuZ2UnLCAoKSA9PiB7XHJcbiAgICAgIHRoaXMuYXVkaW9Wb2x1bWUgPSBNYXRoLmZsb29yKHRoaXMuYXVkaW9QbGF5ZXIubmF0aXZlRWxlbWVudC52b2x1bWUgKiAxMDApO1xyXG4gICAgICBpZiAodGhpcy5hdWRpb1ZvbHVtZSA9PSAwKSB7XHJcbiAgICAgICAgdGhpcy5pc011dGUgPSB0cnVlO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHRoaXMuaXNNdXRlID0gZmFsc2U7XHJcbiAgICAgIH1cclxuICAgIH0pXHJcbiAgfVxyXG5cclxuXHJcbiAgcGxheSgpIHtcclxuICAgIC8vdG9nZ2xlIHBsYXktcGF1c2UgYnV0dG9uXHJcbiAgICB0aGlzLmlzQXVkaW9QbGF5aW5nID0gdHJ1ZTtcclxuICAgIC8vcGxheSB3aGVuIHVzZXIgY2xpY2sgcGxheSBidXR0b25cclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLmF1ZGlvUGxheWVyLm5hdGl2ZUVsZW1lbnQucGxheSgpO1xyXG4gICAgICB0aGlzLnBsYXlFdmVudC5lbWl0KCk7XHJcbiAgICAgfSwgMCk7XHJcbiAgfVxyXG5cclxuICBwYXVzZSgpIHtcclxuICAgIC8vdG9nZ2xlIHBsYXktcGF1c2UgYnV0dG9uXHJcbiAgICB0aGlzLmlzQXVkaW9QbGF5aW5nID0gZmFsc2U7XHJcbiAgICAvL3BhdXNlIHdoZW4gdXNlciBjbGljayBwYXVzZSBidXR0b25cclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLmF1ZGlvUGxheWVyLm5hdGl2ZUVsZW1lbnQucGF1c2UoKTtcclxuICAgICAgdGhpcy5wYXVzZUV2ZW50LmVtaXQoKTtcclxuICAgICB9LCAwKTtcclxuICB9XHJcblxyXG4gIGdldEF1ZGlvTGVuZ3RoKCkge1xyXG4gICAgdGhpcy50b3RhbEF1ZGlvTGVuZ3RoID0gTWF0aC5mbG9vcih0aGlzLmF1ZGlvUGxheWVyLm5hdGl2ZUVsZW1lbnQuZHVyYXRpb24pO1xyXG4gIH1cclxufVxyXG4iXX0=