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 ...
