Как создать плеер?

После того как мы научились делать запрос по API, приступаем к созданию полноценного плеера.

У нас есть список треков, но надо теперь его оживить - научимся открывать карточку каждого трека.

Экран песни

Создадим еще один экран и настроем маршрутизацию по id карточки

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>
  )
})

В этом коде происходит следующее:

• cardScreen - новый экран, который откроется по адресу '/card/:id', когда мы выберем песню. У каждой песни есть id и при нажатии на нее, делается запрос по адресу https://itunes.apple.com/lookup?&id=${id} с нужным id.

Теперь при нажатии на песню должен открываться экран с ее названием:

Самое время поменять дизайн карточки - отобразим иконку и зададим ей ширину в 100%, а так же добавим жанр и имя исполнителя.

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

Воспроизведение

Если мы припишем тег audio с параметром src, куда вписывается свойство url, то сможем воспроизвести песню.

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

Настроем экран под мобильную версию - desktopLayout='mobile' добавим к тегу screen главного экрана

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