个人Web音乐播放器实践小结 React + Redux
web音乐播放器实践
在线预览传送门:http://iblossomspace.com/onlineMusicPlayer
本项目仅作学习交流使用,歌曲版权归QQ音乐所有!
技术栈及相关组件
相关技术栈:react.js
+ react-router-dom
+ redux
使用到的第三方 react 组件:swiper
+ react-scrollbar
遇到的问题及解决方法
redux 数据管理
使用 redux 管理当前正在播放的歌曲、播放列表、播放历史、收藏的歌曲数据。
在路由跳转的多个页面中都需要获取以上数据,为了避免将数据在组件树上自上而下层层传递,再自下而上层层传递的繁复操作,此处使用 redux 管理以上数据。
redux 具体使用方法在此不做赘述了。
自定义滚动条组件 react-scrollbar
自定义滚动条的 react 组件有很多,此处我选择了 react-scrollbar ,该组件满足滚动条的滚动、拖拽、点击需求。
在歌曲播放进度更新,需要同步移动歌词区域的滚动条时,需要使用该组件提供的 scrollYTo(topPosition)
方法。根据 npm 官网上该组件的文档描述,该方法挂载在组件实例的 context
属性的 scrollArea
对象下,由于 react.js 的更新使得 context
相关的API有明显差异,而该组件是基于旧版本的 context
API 进行封装的,始终无法根据文档提示的方法获取。
虽然如此,但是通过 ref
获取组件实例后发现,组件实例下就存在 scrollArea
这个对象,自然也能使用 scrollArea
下面的那些API了。
<ScrollArea
className="song-lyrics"
horizontal={false}
stopScrollPropagation={true}
verticalContainerStyle={
{ backgroundColor: '#e1e1e2', borderRadius: '4px' }}
verticalScrollbarStyle={
{ backgroundColor: '#80afdb', borderRadius: '4px' }}
ref={scrollArea => this._scrollArea=scrollArea}
></ScrollArea>
this._scrollLyrics.scrollArea.scrollYTo(34