ngx-audio-player/bundles/ngx-audio-player.umd.min.js

[](https://www.npmjs.com/package/ngx-audio-player) [](https://www.npmjs.com/package/ngx-audio-player) [![licence](h

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("rxjs"),require("@angular/material"),require("@angular/common"),require("@angular/core"),require("@fortawesome/angular-fontawesome"),require("@fortawesome/fontawesome-svg-core"),require("@fortawesome/free-solid-svg-icons"),require("@angular/forms")):"function"==typeof define&&define.amd?define("ngx-audio-player",["exports","rxjs","@angular/material","@angular/common","@angular/core","@fortawesome/angular-fontawesome","@fortawesome/fontawesome-svg-core","@fortawesome/free-solid-svg-icons","@angular/forms"],e):e(t["ngx-audio-player"]={},t.rxjs,t.ng.material,t.ng.common,t.ng.core,t.angularFontawesome,t.fontawesomeSvgCore,t.freeSolidSvgIcons,t.ng.forms)}(this,function(t,e,a,n,i,r,o,s,l){"use strict";var c=function(t,e){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function p(t,e){function n(){this.constructor=t}c(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var d=function(){function t(){this.playlist=[],this.indexSong=0,this.currentTrack=new e.BehaviorSubject(this.playlist[this.indexSong]),this.currentTime=0,this.duration=0}return t.prototype.init=function(){this.updateCurrentSong()},t.prototype.nextSong=function(){this.indexSong+1>=this.playlist.length?this.indexSong=0:this.indexSong++,this.updateCurrentSong()},t.prototype.previousSong=function(){this.indexSong-1<0?this.indexSong=this.playlist.length-1:this.indexSong--,this.updateCurrentSong()},t.prototype.resetPlaylist=function(){this.indexSong=0,this.updateCurrentSong()},t.prototype.selectATrack=function(t){this.indexSong=t-1,this.updateCurrentSong()},t.prototype.updateCurrentSong=function(){var t=this.playlist[this.indexSong],e=0<=this.indexSong-1?this.playlist[this.indexSong-1]:this.playlist[this.playlist.length-1],n=this.indexSong+1>=this.playlist.length?this.playlist[0]:this.playlist[this.indexSong+1];this.currentTrack.next([e,t,n])},t.prototype.getSubjectCurrentTrack=function(){return this.currentTrack},t.prototype.getPlaylist=function(){return this.playlist},t.prototype.setPlaylist=function(t){this.playlist=t},t.prototype.getIndexSong=function(){return this.indexSong},t.decorators=[{type:i.Injectable}],t.ctorParameters=function(){return[]},t}(),u=function(){function t(){this.loaderDisplay=!1,this.isPlaying=!1,this.currentTime=0,this.duration=.01}return t.prototype.currTimePosChanged=function(t){this.player.nativeElement.currentTime=t.value},t.prototype.bindPlayerEvent=function(){var t=this;this.player.nativeElement.addEventListener("playing",function(){t.isPlaying=!0,t.duration=Math.floor(t.player.nativeElement.duration)}),this.player.nativeElement.addEventListener("pause",function(){t.isPlaying=!1}),this.player.nativeElement.addEventListener("timeupdate",function(){t.currentTime=Math.floor(t.player.nativeElement.currentTime)}),this.player.nativeElement.addEventListener("loadstart",function(){t.loaderDisplay=!0}),this.player.nativeElement.addEventListener("loadeddata",function(){t.loaderDisplay=!1,t.duration=Math.floor(t.player.nativeElement.duration)})},t.prototype.playBtnHandler=function(){this.loaderDisplay||(this.player.nativeElement.paused?this.player.nativeElement.play(this.currentTime):(this.currentTime=this.player.nativeElement.currentTime,this.player.nativeElement.pause()))},t.prototype.play=function(){var t=this;setTimeout(function(){t.player.nativeElement.play()},0)},t.propDecorators={player:[{type:i.ViewChild,args:["audioPlayer"]}]},t}(),y=function(n){function t(t){var e=n.call(this)||this;return e.playlistService=t,e.displayedColumns=["title","status"],e.dataSource=new a.MatTableDataSource,e}return p(t,n),t.prototype.ngOnInit=function(){var e=this;this.setDataSourceAttributes(),this.bindPlayerEvent(),this.playlistService.setPlaylist(this.playlistData),this.playlistService.getSubjectCurrentTrack().subscribe(function(t){e.playlistTrack=t}),this.player.nativeElement.currentTime=0,this.playlistService.init()},Object.defineProperty(t.prototype,"matPaginator",{set:function(t){this.paginator=t,this.setDataSourceAttributes()},enumerable:!0,configurable:!0}),t.prototype.setDataSourceAttributes=function(){var e=1;this.playlistData&&(this.playlistData.forEach(function(t){t.index=e++}),this.dataSource=new a.MatTableDataSource(this.playlistData),this.dataSource.paginator=this.paginator)},t.prototype.nextSong=function(){(this.playlistService.indexSong+1)%this.paginator.pageSize!=0&&this.playlistService.indexSong+1!==this.paginator.length||(this.paginator.hasNextPage()?this.paginator.nextPage():this.paginator.hasNextPage()||this.paginator.firstPage()),this.currentTime=0,this.duration=.01,this.playlistService.nextSong(),this.play()},t.prototype.previousSong=function(){this.currentTime=0,this.duration=.01,this.checkIfSongHasStartedSinceAtleastTwoSeconds()?this.resetSong():(this.playlistService.indexSong%this.paginator.pageSize!=0&&0!==this.playlistService.indexSong||(this.paginator.hasPreviousPage()?this.paginator.previousPage():this.paginator.hasPreviousPage()||this.paginator.lastPage()),this.playlistService.previousSong()),this.play()},t.prototype.resetSong=function(){this.player.nativeElement.src=this.playlistTrack[1].link},t.prototype.selectTrack=function(t){var e=this;console.log("selectTrack(index: number): void: "+t),this.playlistService.selectATrack(t),setTimeout(function(){e.player.nativeElement.play()},0)},t.prototype.checkIfSongHasStartedSinceAtleastTwoSeconds=function(){return 2<this.player.nativeElement.currentTime},Object.defineProperty(t.prototype,"playlist",{set:function(t){this.playlistData=t,this.ngOnInit()},enumerable:!0,configurable:!0}),t.decorators=[{type:i.Component,args:[{selector:"mat-advanced-audio-player",template:'<mat-card class="row d-flex justify-content-center ngx-advanced-audio-player" style="margin: 0px;">\n  <audio [src]="playlistTrack[1].link" #audioPlayer></audio>\n  \n  <button mat-button class="p-1" style="border-left: 1px solid #ddd;" (click)=\'previousSong();\' [disabled]="loaderDisplay">\n    <fa-icon class="fa fa-lg" [icon]="[\'fas\',\'step-backward\']" aria-hidden="true"></fa-icon>\n  </button>\n  <button mat-button class="p-1" (click)=\'playBtnHandler();\' style="border-left: 2px solid #ccc; border-right: 2px solid #ccc;"\n    [disabled]="loaderDisplay">\n    <fa-icon *ngIf="loaderDisplay" title="loading..." class="fa fa-2x loading-track" [pulse]="true" [icon]="[\'fas\',\'spinner\']"\n      aria-hidden="true"></fa-icon>\n    <fa-icon *ngIf="!loaderDisplay && !isPlaying" class="fa fa-2x play-track" style="color:#444" [icon]="[\'fas\',\'play\']"\n      aria-hidden="true"></fa-icon>\n    <fa-icon *ngIf="!loaderDisplay && isPlaying" class="fa fa-2x pause-track" style="color:#444" [icon]="[\'fas\',\'pause\']"\n      aria-hidden="true"></fa-icon>\n  </button>\n  <button mat-button class="p-1" style="border-right: 1px solid #ddd;" (click)=\'nextSong();\' [disabled]="loaderDisplay">\n    <fa-icon class="fa fa-lg next-track" [icon]="[\'fas\',\'step-forward\']" aria-hidden="true"></fa-icon>\n  </button>\n\n  <div class="col">\n    <div class="d-flex flex-fill">\n      <div class="py-3 px-1" style="font-size: 12px">\n        <span *ngIf="duration !== 0.01">\n          {{currentTime | secondsToMinutes}}\n        </span>\n      </div>\n      <mat-slider class="flex-fill p-1" style="width: 100%" min="0" max="{{duration}}" value="{{currentTime}}" (change)="currTimePosChanged($event)"></mat-slider>\n\n      <div class="py-3 px-1" style="font-size: 12px; text-align: right">\n        <span *ngIf="duration !== 0.01">\n          -{{duration-currentTime | secondsToMinutes }}\n        </span>\n      </div>\n    </div>\n  </div>\n\n</mat-card>\n\n<mat-card *ngIf="displayTitle" style="border: 1px solid #ddd; box-shadow: none;">\n  <div class="p-1" style="text-align: center;">\n    <div style="padding:1px 3px;">\n      <span *ngIf="!isPlaying">{{ playlistTrack[1].title }}</span>\n      <marquee *ngIf="isPlaying" behavior="scroll" direction="left">{{ playlistTrack[1].title }}</marquee>\n    </div>\n    <div class="clear"></div>\n  </div>\n</mat-card>\n\n<mat-accordion *ngIf="displayPlaylist">\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      Play List\n    </mat-expansion-panel-header>\n    <table mat-table [dataSource]="dataSource" class="mat-elevation-z6">\n      <ng-container matColumnDef="title">\n        <th mat-header-cell *matHeaderCellDef> Title </th>\n        <td mat-cell *matCellDef="let element" (click)="selectTrack(element.index)"> {{element.title}} </td>\n      </ng-container>\n      <ng-container matColumnDef="status">\n        <th mat-header-cell *matHeaderCellDef> </th>\n        <td mat-cell *matCellDef="let element">\n          <div *ngIf="playlistTrack[1].title === element.title">\n            <fa-icon *ngIf="isPlaying" class="fa" [icon]="[\'fas\',\'play\']" [spin]="true" aria-hidden="true"></fa-icon>\n            <fa-icon *ngIf="!isPlaying" class="fa" [icon]="[\'fas\',\'play\']" aria-hidden="true"></fa-icon>\n          </div>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>\n      <tr class="mat-select-content" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>\n    </table>\n    <mat-paginator [pageSizeOptions]="[2, 5, 10]" showFirstLastButtons></mat-paginator>\n  </mat-expansion-panel>\n</mat-accordion>',styles:["@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap-grid.min.css);mat-card{padding:0!important}mat-slider{max-height:30px}table{width:100%}button:focus,button:hover{outline:0!important}.ngx-advanced-audio-player{min-width:275px}"]}]}],t.ctorParameters=function(){return[{type:d}]},t.propDecorators={displayTitle:[{type:i.Input}],displayPlaylist:[{type:i.Input}],matPaginator:[{type:i.ViewChild,args:[a.MatPaginator]}],playlist:[{type:i.Input}]},t}(u),f=function(e){function t(){var t=e.call(this)||this;return t.displayTitle=!1,t}return p(t,e),t.prototype.ngOnInit=function(){this.bindPlayerEvent()},t.prototype.resetSong=function(){this.player.nativeElement.src=this.audioUrl},t.decorators=[{type:i.Component,args:[{selector:"mat-basic-audio-player",template:'<mat-card class="d-flex ngx-basic-audio-player">\n    <audio [src]="audioUrl" #audioPlayer></audio>\n    <button mat-button (click)=\'playBtnHandler();\' class="p-1 ngx-basic-audio-player-button-handler" [disabled]="loaderDisplay">\n        <fa-icon *ngIf="loaderDisplay" title="loading..." class="fa fa-lg loading-track" [pulse]="true" [icon]="[\'fas\',\'spinner\']"\n            aria-hidden="true"></fa-icon>\n        <fa-icon *ngIf="!loaderDisplay && !isPlaying" class="fa fa-lg play-track" [icon]="[\'fas\',\'play\']" aria-hidden="true"></fa-icon>\n        <fa-icon *ngIf="!loaderDisplay && isPlaying" class="fa fa-lg pause-track" [icon]="[\'fas\',\'pause\']" aria-hidden="true"></fa-icon>\n    </button>\n    <div class="flex-fill p-1 ngx-basic-audio-player-slider">\n        <mat-slider style="width: 100%" min="0" max="{{duration}}" value="{{currentTime}}" (change)="currTimePosChanged($event)"></mat-slider>\n    </div>\n    <div class="p-3 ngx-basic-audio-player-duration">\n        <span *ngIf="duration !== 0.01">\n            -{{duration-currentTime |\n            secondsToMinutes }}\n        </span>\n    </div>\n</mat-card>\n<mat-card *ngIf="displayTitle && title !== \'\'" style="border-top: 1px solid #ddd;">\n    <div style="text-align: center;">\n        <div style="padding:1px 3px;">\n            {{ title }}\n        </div>\n    </div>\n</mat-card>\n',styles:["@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap-grid.min.css);mat-card,mat-slider{padding:0!important}button:focus,button:hover{outline:0!important}.ngx-basic-audio-player{min-width:275px}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={title:[{type:i.Input}],audioUrl:[{type:i.Input}],displayTitle:[{type:i.Input}]},t}(u),g=function(){function t(){}return t.prototype.transform=function(t){return("0"+Math.floor(t/60)).slice(-2)+":"+("0"+t%60).slice(-2)},t.decorators=[{type:i.Pipe,args:[{name:"secondsToMinutes"}]}],t}(),h=function(){function t(){o.library.add(s.faPlay,s.faPause,s.faSpinner,s.faStepForward,s.faStepBackward)}return t.decorators=[{type:i.NgModule,args:[{declarations:[f,g,y],imports:[n.CommonModule,a.MatButtonModule,a.MatCardModule,a.MatTableModule,a.MatFormFieldModule,a.MatSliderModule,a.MatExpansionModule,a.MatPaginatorModule,l.FormsModule,r.FontAwesomeModule],exports:[f,y],providers:[d]}]}],t.ctorParameters=function(){return[]},t}(),m=function v(){};t.MatAdvancedAudioPlayerComponent=y,t.MatBasicAudioPlayerComponent=f,t.NgxAudioPlayerModule=h,t.Track=m,t.ɵa=u,t.ɵc=g,t.ɵb=d,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-audio-player.umd.min.js.map