<audio-track-play>

Renders a play/pause button that optionally displays a loading spinner

Usage

<audio-track #audio [track]="myTrack" (onFinish)="onTrackFinished($event)">
 <ion-item>  
   <audio-track-play item-left [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>
   <h3>{{audio.title}}</h3>
 </ion-item>    
</audio-track>

If placed within a <ion-thumnbail> component it will render as a semi-transparent button layover (see live demo). Passing a <ion-spinner> as a child element will display a loading spinner while loading.

<audio-track #audio [track]="track" (onFinish)="onTrackFinished($event)">
  <ion-item>  
      <ion-thumbnail item-left>
        <img src="{{audio.art}}">
        <audio-track-play dark [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>  
      </ion-thumbnail>
      <p><strong>{{audio.title}}</strong></p>
  </ion-item>    
</audio-track>