How can I change the the button icon from "play" to "pause" in my code

Ionic Framework ionic-v3
1

I have a page to play the online music using the Audio object.
My question is how can I change the the button icon from “play” to “pause” after it was clicked in my code ?

<button ion-button icon-only round (click)="playAudio($event, poem)"    >
     Play
  <ion-icon name="play" ></ion-icon  >
</button  >

many thanks,
Jonas

2

bind your ion icon to a variable like this:

<ion-icon [name]="someVar">

Then switch someVar from play to the pause icon :slight_smile:

1 Like
3

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

Actually I have two buttons:

<button ion-button icon-only round (click)="startAudio()">
  			<ion-icon [name]="someVar"></ion-icon  >
  		</button>
		<button ion-button  (click)="stopAudio()" color="danger">
			<ion-icon name="pause" id ="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();
  }

How can I do that, please
?