首页 > 其他分享 >react-native音乐播放器

react-native音乐播放器

时间:2023-02-14 15:34:21浏览次数:55  
标签:播放器 歌词 音乐 react 点击 播放 native


android效果

[video(video-q8EJW2y5-1592291410395)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=583605396)(image-/i/ll/?i=img_convert/8ab249a7ac7c8acac580d7f0e594e75e.png)(title-react-native音乐播放)]

ios区别:加载动画使用了lottie,android遇到闪退问题,没有使用动画

react-native音乐播放器_react native


功能:

拖拽卡片选择专辑,卡片向下拖动可移除,下一张替换,点击卡片进入音乐列表,有此专辑的信息展示,一个点击打开或关闭的介绍,关闭时会自动滚动到介绍头部,
音乐列表可点击播放对应音乐,点击左侧的播放图标功能一致,再次点击暂停音乐,再点击恢复播放,并用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​

来找我玩啊

react-native音乐播放器_ios_02


标签:播放器,歌词,音乐,react,点击,播放,native
From: https://blog.51cto.com/u_15964288/6056976

相关文章

  • react-native手势动画制作精美卡片拖拽效果
    视频学习地址https://www.bilibili.com/video/BV1h7411o7zE代码importReact,{Component}from'react'import{StyleSheet,Text,View,PanResponder,Animate......
  • react-native仿写洛克王国手游版
    首先声明此项目完全是出于学习和对洛克王国的喜爱而生,项目中使用的游戏宠物若涉及侵权请联系我前两天和朋友聊天说到洛克王国没有手游,正好最近在学习react-native,觉得可以尝......
  • react豆瓣API获取电影数据小demo
    entd使用使用entd的layout布局快速搭建页面​​entd官网​​页面刷新,路由不刷新,设置sider和路由同步,在componentWillMount还是componentDidMount都获取不到路由信息,但是能......
  • uni-app写小程序音乐播放器
    uni-app开发,学习成本低开发小程序还是比较好用的uni-app框架,这个框架现阶段还是有不少问题的,项目中遇到的几点1,v-show不能正常使用->绑定一个display:none的样式根据条件判......
  • Jest + React 单元测试最佳实践
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。前言单元测试是一种用于测试“单元”的......
  • react typescript封装函数式组件styled-component
    interfaceIButton{margin?:boolean;width?:string;justify?:JustifyContentProps;}constButton=styled.button<IButton>`.....`;interfaceILoadButtonext......
  • H.265网页播放器EasyPlayer添加sei数据导致视频花屏该如何解决?
    EasyPlayer属于TSINGSEE青犀视频研发的性能稳定、播放流畅的H.265视频流媒体播放器,可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等,支持高清画面秒开、视频播放流畅,具......
  • 前端二面经典react面试题
    如何解决props层级过深的问题使用ContextAPI:提供一种组件之间的状态共享,而不必通过显式组件树逐层传递props;使用Redux等状态库。react实现一个全局的dialogimpo......
  • 问:你是如何进行react状态管理方案选择的?
    前言:最近接触到一种新的(对我个人而言)状态管理方式,它没有采用现有的开源库,如redux、mobx等,也没有使用传统的useContext,而是用useState+useEffect写了一个发布订阅者模式进......
  • 京东前端react面试题及答案
    useEffect与useLayoutEffect的区别(1)共同点运用效果:useEffect与useLayoutEffect两者都是用于处理副作用,这些副作用包括改变DOM、设置订阅、操作定时器等。在函数......