How to Create a Player?

After learning how to make requests via API, we can proceed to create a full-fledged player.

We have a list of tracks, but now we need to bring it to life - let's learn how to open the card for each track.

Song Screen

Let's create another screen and set up routing by the id of the card.

const cardScreen = app.screen('/card/:id', async function (ctx, req) {
  
  const id = req.params.id;
  const trackRes = await request.get(`https://itunes.apple.com/lookup?&id=${id}`);
  const track = trackRes.body.results[0];

  return (
    <screen> 
      <text>{track.trackName}</text>
    </screen>
  );
});

In this code, the following happens:

• cardScreen - a new screen that will open at the address '/card/:id' when we select a song. Each song has an id, and when clicked, a request is made to https://itunes.apple.com/lookup?&id=${id} with the required id.

Now, when clicking on a song, the screen with its title should open:

It's time to change the card design - let's display the icon and set its width to 100%, as well as add the genre and artist's name.

return (
 <screen title={track.trackName}>
   <image style={{ width: '100%' }} src={track.artworkUrl100.replace('100x100', '1000x1000')} />
 </screen>
);

Playback

If we add an audio tag with the src parameter, where we input the url property, we can play the song.

<audio src={{url:track.previewURL}}></audio>

Let's set up the screen for mobile version - desktopLayout='mobile' will be added to the screen tag of the main screen.

<screen desktopLayout='mobile' title="audioplayer">