react-native音樂播放器

android效果

react-native音樂播放


ios區別:加載動畫使用了lottie,android遇到閃退問題,沒有使用動畫
在這裏插入圖片描述
功能:

拖拽卡片選擇專輯,卡片向下拖動可移除,下一張替換,點擊卡片進入音樂列表,有此專輯的信息展示,一個點擊打開或關閉的介紹,關閉時會自動滾動到介紹頭部,
音樂列表可點擊播放對應音樂,點擊左側的播放圖標功能一致,再次點擊暫停音樂,再點擊恢復播放,並用asyncStorage保存當前播放的音樂,和音樂的狀態(播放或暫停),這樣退出這首專輯的時候,再次進入可以判斷是否進入過此專輯,若進入過,再判斷是否播放過音樂,和音樂的狀態,以保持音樂列表圖標的一致
音樂列表底部一個點擊了音樂纔會顯示的控制欄,進行上一曲,下一曲的切換和當前音樂的播放暫停控制
點擊底部欄的音樂圖片或音樂的名稱進入歌詞頁面,進度條顯示音樂播放進度,點擊可跳轉播放進度,中間有音樂圖片隨音樂播放而轉動,音樂暫停而停止轉動,點擊圖片會顯示歌曲的歌詞
點擊歌詞兩側空白區域可關閉顯示歌詞,點擊某句歌詞可跳轉到當前點擊位置播放,拖拽歌詞鬆手後會在一句歌詞播放時回到歌詞播放位置,並且歌詞下方也有音樂上一曲,下一曲,以及播放暫停控制

用到的工具,庫,技術

整個項目使用expo構建了,使用了很多expocli提供的功能,expo-blur,@expo/vector-icons,包括音頻expo-av
歌詞頁是一個獨立的路由,控制音樂切換和播放暫停功能用到了redux,利用redux發送不同的狀態,控制音樂列表頁底部的控制欄進行切換和播放暫停功能,問題就是有個響應的過程,沒有點擊即產生效果
加載音樂列表ios用了lottie動畫,android遇到的閃退問題,換成了普通的loading動畫
再就是rn常用的ui庫 antd,react-native-paper,react-native-element

項目地址 https://github.com/tangmusenLiu/react-native-music.git

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章