Как я создал собственный плеер Spotify
вступление
В моем первом посте этой серии я объяснил, как управлял процессом аутентификации с помощью ReactNative и Spotify. В этой статье я собираюсь объяснить, как я создал свой собственный проигрыватель Spotify с анимацией swipecard. Для быстрой демонстрации посмотрите это видео.
Вы проверяете репо здесь
Домашний экран
Если вы посмотрите на импорт, то увидите, что мы импортируем три пользовательских компонента: CustomHeader, Player и MainSwiper. Это самые интересные части приложения. Но сначала давайте взглянем на остальную часть главного экрана!
Мы определяем переменную index, которая будет изменяться каждый раз при вызове функции onSwiped. Эта функция является частью компонента MainSwiper и следит за текущим индексом, когда карта удаляется.
Индекс также необходим для отображения текущей позиции текущей песни в 20 лучших композициях вашей учетной записи Spotify. Таким образом, первая отображаемая и проигрываемая песня будет вашей текущей первой песней. Кроме того, индекс также необходим, чтобы указать api spotify в компоненте Player, какую песню нужно воспроизвести.
Вот и все о главном экране. Перейдем к более интересным частям этого приложения.
Компонент Player
Как вы можете понять из импорта, я здесь не говорю напрямую о Spotify Api. Вместо этого я использую Spotify Web Api Node, который упрощает взаимодействие с Spotify Api.
Прежде всего, нам нужно создать экземпляр api, как в первой строке кода выше. Во-вторых, нам нужно предоставить Spotify api токен доступа, который мы получили в процессе аутентификации. Тогда мы готовы перейти к использованию API!
В этом хуке useEffect мы имеем в виду данные topSong, которые мы также получили в процессе аутентификации. Чтобы воспроизвести песню через api, нам нужно предоставить song_uri, который включен в данные topSong. Таким образом, каждый раз, когда индекс в компоненте Home изменяется, api spotify также будет воспроизводить другую песню. В конце концов, наши данные topSong представляют собой массив объектов песни, которые мы перебираем. props.index сообщает API, какой объект массива следует выбрать.
Эти два вызова API (spotifyApi.pause () spotifyApi.play ()) заключены в два объекта TouchableOpacity, которые представляют кнопку воспроизведения и паузы. В зависимости от состояния «воспроизведение» один из них отображается и доступен для прикосновения, а затем воспроизведение будет либо приостановлено, либо продолжено.
Компонент Swiper
В компоненте swiper мы используем пакет react-native-deck-swiper, который позволяет довольно легко реализовать анимацию swipecard!
Затем вам просто нужно предоставить некоторые данные этому компоненту Swiper, который в данном случае является нашими topSongs. Мы отображаем все объекты этого массива topSongs, и для каждой песни мы отображаем View с фоном, фактическим изображением обложки, названием песни и исполнителем. Для стилей фона я использую компонент BlurView из expo-blur, который выглядит довольно круто, не так ли?
Не стесняйтесь проверить остальную часть кода здесь, на мой взгляд, ничего впечатляющего не осталось.
Вывод
Вот как легко вы можете создать свой собственный плеер Spotify с помощью нескольких строк кода. Надеюсь, вам понравилась эта статья. Если да, пожалуйста, оставьте здесь лайк и комментарий.
Хорошего дня!
Больше контента на plainenglish.io
