Play and pause button

Ionic Framework ionic-v3
1

Could someone please explain me how to change button to play or pause.

Actually I have two buttons (play and pause):

<button ion-button icon-only round (click)="startAudio()">
  	<ion-icon name="play"></ion-icon  >
 </button>
<button ion-button  (click)="stopAudio()" color="danger">
	<ion-icon name="pause"></ion-icon>
</button>

I have a function for each button.

  startAudio() {
  	let options: StreamingAudioOptions = {
      successCallback: () => { console.log('Finished Audio') },
      errorCallback: (e) => { console.log('Error: ', e) },
      initFullscreen: false // iOS only!
    };
    this.streamingMedia.playAudio('http://myurl/music.mp3', options);
  }


  stopAudio() {
  		this.streamingMedia.stopAudio();
  }

I saw that I can do a variable like this :

  		<button ion-button icon-only round (click)="startAudio()">
  			<ion-icon [name]="someVar"></ion-icon  >
  		</button>

But where can i switched somevar to play or pause ? and the functions startAudio() and stopAudio() ?
How can I do that, please ?

2

hi @nouleho

You could try like below code


  <button ion-fab icon-only (click)="startAudio(); showToggleFun()" *ngIf="showToggle">
  	<ion-icon name="play"></ion-icon  >
 </button>
<button ion-fab  (click)="stopAudio(); showToggleFun()" *ngIf="!showToggle" color="danger">
	<ion-icon name="pause"></ion-icon>
</button>

showToggle:boolean = true;



showToggleFun(){
    if(this.showToggle == true){
      this.showToggle = false;
    }else{
      this.showToggle = true;
    }
  }

otherwise

startAudio() {
  this.showToggle = false;
  	let options: StreamingAudioOptions = {
      successCallback: () => { console.log('Finished Audio') },
      errorCallback: (e) => { console.log('Error: ', e) },
      initFullscreen: false // iOS only!
    };
    this.streamingMedia.playAudio('http://myurl/music.mp3', options);
  }


  stopAudio() {
    this.showToggle = true;
    this.streamingMedia.stopAudio();
  }

Thanks