First, let's take a look at the template home.html:

<ion-content padding>    <ion-item>       <ion-thumbnail item-left>        <img src="{{track.art}}">      </ion-thumbnail>      <div item-content style="width:100%">        <p><strong>{{track.title}}</strong> ⚬ <em>{{track.artist}}</em>      </p>      </div>    </ion-item>    <ion-row id="music-controls">      <ion-col (click)="play()"><ion-icon name="play"></ion-icon></ion-col>      <ion-col (click)="pause()"><ion-icon name="pause"></ion-icon></ion-col>    </ion-row></ion-content>

It is very simple. We are showing the track's thumbnail and track title along with the track artist in ion-item. Then we have the play and pause buttons, shown inside ion-row.

At home.ts, we have a list of audio tracks for our media player. For the sake ...