个人Web音乐播放器实践
个人Web音乐播放器实践小结 React + Redux
- web音乐播放器实践
- 技术栈及相关组件
- 遇到的问题及解决方法
- redux 数据管理
- 自定义滚动条组件 react-scrollbar
- 首页歌单数据异步请求保证渲染顺序
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了。
<ScrollAreaclassName="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 * (this.state.currentIndex - 4))
首页歌单数据异步请求保证渲染顺序
根据以下顺序请求接口并保证每次渲染顺序一致。在整个实践中,我使用了fetch
来请求数据。
// 首页推荐歌单
export const homeSheet = [{ name: "流行音乐", id: 4 },{ name: "热门歌曲", id: 26 },{ name: "最新音乐", id: 27 },{ name: "网络歌曲", id: 28 }
];
使用 Promise.all()
方法进行封装,结合 fetch
,请求到的数据依次请求完并按照顺序存入数组后,再使用 setState
更新视图数据。
// 获取分类歌单
getSheets = async () => {const resArr = await Promise.all((function () {const fetches = [];homeSheet.forEach(item => {fetches.push(fetch(api.topid + item.id))})return fetches;})());const dataArr = await Promise.all((function () {const datas = [];resArr.forEach(item => {datas.push(item.json());})return datas;})());const sheets = [];dataArr.forEach((item, index) => {sheets.push({id: homeSheet[index].id,name: homeSheet[index].name,songs: item.songs})})this.setState({ sheets })
}
不过,这样便降低了性能,每次载入首页都较为耗时。
同时,若在组件 setState
数据渲染完成前就切换到其它路由页面,则会报错(因为还有 setState
这个异步操作未完成,提示建议在 componentWillUnmount
这个钩子函数中取消操作)。
此处我为了解决报错提示,直接显示 Loading 组件遮罩在最上层,等待视图中的数据异步渲染完成后再隐藏 Loading 组件。但是因操作耗时 Loading 组件显示的时间略微有些长。
此处暂待优化。
文中所述若有不当之处,敬请批评指正,谢谢!
个人Web音乐播放器实践相关推荐
- web音乐播放器总结
web音乐播放器总结 前言 项目暂时告一段落,胸中有股炽热之气望喷涌而出!忍不住吐槽,为什么程序员要加班啊,为什么产品下达deadline,就得把这生死剑架在程序员的脖子上.卧槽,听说程序员在国外是叫 ...
- web音乐播放器+后台歌曲,歌单管理
项目地址 https://github.com/sevenyoungairye/web_music_palyer 技术点 - 基于h5, css3, js, bootstarp, jquery,- 后 ...
- 小小weibo音乐播放器
故事背景:前几周看到一个网友做web音乐播放器,然而在巧合之下发现微博的网页播放器挺不错的,就捉摸着自己试试,文章最末处献上源码,喜欢就请带走吧. 演示地址:http://123.56.191.84/ ...
- 在线音乐播放器--毕业设计01
开发环境及框架:Ubuntu16,Eclipse,MySQL5.7,JDK1.8,Tomcat7.0,SSM,Maven,Git 联系方式: QQ:764362453 微信:Mr___Fuckll-X ...
- 音视频开发(三十八):ExoPlayer 音频播放器实践
通过上一篇的学习实践,我们了解了ExoPlayer的优缺点以及基本用法,今天我们进入ExoPlayer的音频播放实践,我们来一起实现一个简单的音频播放器. 目录 媒体播放框架MediaSession ...
- .net vue漂亮登录界面_基于 electron-vue 开发的音乐播放器「实践」
作者:XiaoTuGou 转发链接:https://github.com/SmallRuralDog 前言 基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐. 技术栈electron ...
- web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
- 开源html5在线音乐,10 个基于 Web 的 HTML5 音乐播放器
HTML5 是一种用于创建和呈现的网页内容的语言.这是一个革命性的语言,它拥有一些真正棒的功能和一个新的HTML5规范允许本地音频流的播放.本文向你推荐 10 个最棒的 HTML5 音频播放器,看看你 ...
- HTML5期末大作业:在线音乐播放器网站设计——html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设
HTML5期末大作业:在线音乐播放器网站设计--html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设 ...
最新文章
- Speex for Android
- 最新发布!斯坦福 CS224n 出作业视频详细讲解啦!
- The property delegate of CALayer cause Crash.
- linux摄像头 自动对焦,基于H3在Linux下驱动OV5640摄像头的方法与流程
- github生成燃尽图
- mesos INSTALL
- 关于空间复杂度,你可能有几个疑问?
- 「leetcode」106.从中序与后序遍历序列构造二叉树 105. 从前序与中序遍历序列构造二叉树 (详解)
- Spring - 理解BeanDefinition
- matlab解隐式差分格式,【毕业设计(论文)】二维热传导方程有限差分法的MATLAB实现...
- STM32F205VCT6主控PLC控制器板,已批量生产
- 遗传算法 python 简书_基本遗传算法介绍
- Python3 OpenCV 视频转字符动画
- 《赖氏经典英语语法》第四集
- 华为小实例|VRRP协议
- 苹果iPhone升级到10.3.3后,4G数据网络经常性断网无法连接???
- JDK17的安装教程
- 一种MVVM风格的Android项目架构浅析
- 光谱特征选择---竞争自适应重加权采样CARS
- NUC980开源项目37-RX8025t 时钟芯片