search

arielfaur / ionic-audio

An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
http://arielfaur.github.io/ionic-audio/2.0/index.html
MIT License
320 stars 163 forks source link

play pause button #141

Open jojorb opened 7 years ago

jojorb commented 7 years ago

Hi, thanks for this module, It's more an Angular question i supposed but, i was trying to build a toggle Play/Pause btn with *ngIf like so:

<button *ngIf="audioTrack.pause" ion-button color="victory" icon-only clear (click)="audioTrack.canPlay ? audioTrack.play() : next()">
    <ion-icon name="play"></ion-icon>
</button>

<button *ngIf="audioTrack.isPlaying" ion-button color="victory" icon-only clear (click)="audioTrack.pause()">
    <ion-icon name="pause"></ion-icon>
</button>

The pause btn is ok and working (displayed only when track is playing), but for the Play btn (i just want it to be display when the track is on pause) *ngIf="audioTrack.pause" with this .pause the btn is display everytime and not only when the track is only on pause.

Have you guys got an idea about that, thanks!

*edit: fix the .pause and question

jojorb commented 7 years ago

well, now i'm doing this to get the job done ... 

<button *ngIf='audioTrack.hasLoaded != audioTrack.isPlaying' ion-button color="victory" icon-only clear (click)="audioTrack.canPlay ? audioTrack.play() : next()">
    <ion-icon name="play"></ion-icon>
</button>

i don't know if there is a better solution here

arielfaur commented 7 years ago

You could use !audioTrack.isPlaying for the play button

<button *ngIf="!audioTrack.isPlaying" ion-button color="victory" icon-only clear (click)="audioTrack.canPlay ? audioTrack.play() : next()">
    <ion-icon name="play"></ion-icon>
</button>

Does that work?