React之网易云音乐（实现唱片滚动以及lrc歌词滚动效果）

如下图所示，这里没有gif的图，反正效果就是唱滚动，相应的下方的歌词滚动，使用react实现，歌词是lrc，那么lrc的格式是什么样的，下面会放出图片

lrc格式
实现如下：

1.获取歌词以及处理

 public async getLyric(id: number) { // 获得歌词 let result = await reqLyric({ id }) // ajax获得歌词let lyricList = this.state.lyricListresult['lrc']['lyric'].split(/[\n]/) // 截取中括号.forEach(item => {let temp: Array<string> = item.split(/\[(.+?)\]/)lyricList.push({time: temp[1], // 时间lyc: temp[2] //歌词内容})})lyricList = lyricList.filter(v => v['lyc']) // 去除无歌词内容this.setState({lyric: result['lrc']['lyric'],lyricList})}

 <audioautoPlay={true}controls={true}onPlayCapture={(e) => { this.alreadyPlay(e) }}onEnded={(e) => { this.endPlay(e) }}onTimeUpdate={(e) => { this.timeUpdate(e) }}src={url}></audio>

2.audio触发事件

public state: IState = {lyricList: [],// 歌词数组currentTime: '',// audio当前播放时间currentLyc: 0, // 当前歌词lycStyle: {}// 歌词滚动样式}
public timeUpdate(e: any) { // 播放位置发生时改变触发// 获取audio当前播放时间let currentTime = this.format(document.getElementsByTagName('audio')[0]['currentTime']); // 事件转换let { currentLyc, lyricList } = this.statefor (let i: number = currentLyc; i < lyricList.length; i++) {if (lyricList[i + 1] && currentTime < lyricList[i + 1]['time'] && currentTime > lyricList[i]['time']) {this.setState({currentLyc: i,lycStyle: {transform: `translateY(-${0.545 * i}rem)`}})}}}

 public format(value: number) { // 时间转换if (!value) return ''let interval = Math.floor(value)let minute = (Math.floor(interval / 60)).toString().padStart(2, '0')let second = (interval % 60).toString().padStart(2, '0')return `${minute}:${second}`}

然后将样式绑定滚动

剩下的就是样式的问题了，
具体样式请看我的github，这里就不详细叙述，如何能够帮助到你，记得帮我点个star哦，万分感谢！

React之网易云音乐（实现唱片滚动以及lrc歌词滚动效果）相关推荐

仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等
前言: 今天是我第二次写博客,打算把以前做过的一些小东西记录下来,今天介绍的是我的毕业设计<小罡音乐>是简仿网易云播放器的一些界面和播放音乐功能. 是基于ASP.NET的小罡音乐的设计与实 ...
一起学ReactNative(3) 实现网易云音乐旋转唱片效果
前言先看一下整体完成效果今天主要聊聊这个唱片的旋转效果如何实现这个效果实现其实非常简单先来看一下效果图如有发现任何问题的都可以直接加我的QQ:469373256 效果图红色线:scro ...
网易云音乐黑胶唱片html,黑胶唱片感浓厚：网易云音乐MB1蓝牙音箱要“还原声音本真”...
网易云音乐的受欢迎程度,让大家知道了音乐播放器也能用出情怀,其界面设计.歌曲推荐.人性化创意等让许多用户欲罢不能.而在各大厂商的智能音箱纷纷登场之际,拥有庞大用户量和智能算法的网易云音乐却" ...
模仿网易云音乐黑胶唱片的交互实现
今天在 .NET MAUI 中我们来实现这个交互效果,先来看看效果: 使用.NET MAU实现跨平台支持,本项目可运行于Android.iOS平台. 创建页面布局项目模拟了网易云音乐的播放主界面,可 ...
[MAUI]模仿网易云音乐黑胶唱片的交互实现
文章目录创建页面布局创建手势控件创建影子控件唱盘拨动交互唱盘和唱针动画项目地址用过网易云音乐App的同学应该都比较熟悉它播放界面. 这是一个良好的交互设计,留声机的界面隐喻准确地向人们传 ...
android 音乐播放器专辑图片旋转,Android实现网易云音乐的旋转专辑View
本文实例为大家分享了Android实现网易云音乐的旋转专辑View,供大家参考,具体内容如下一.前言最近做过类似网易云音乐专辑唱片的效果,这里记录下开发思路,仅供参考.但需求不完全与网易云音乐一 ...
网易云音乐歌词制作软件 BesLyric （最新版本下载）
导读 BesLyric , 一款专门制作网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...
实现 60fps 的网易云音乐首页
网易云音乐是一款很优秀的音乐软件,我也是它的忠实用户.最近在研究如何更好的开发TableView,接着我写了一个Model驱动的小框架 - MDTable.为了去验证框架的可用性,我选择了网易云音乐的 ...
仿造网易云音乐轮播图
这几天忙着毕业设计,其中一个页面需放上轮播图,遂听着音乐在网上寻(chao)找(xi)灵(an)感(li),猛地发现原来网易云音乐客户端的轮播图就非常好看,所以就尝试着模仿了一个,虽然十分简陋,但好在 ...
讲完社区故事，网易云音乐这次要靠AI上位？
网易云音乐是一家音乐公司还是科技公司? 虽然很少有人问,但这是一个值得思考的问题.不管提到哪个音乐APP,我们总习惯地把大版权.音乐人.歌迷品味等等内容拿出来探讨.这当然不算错,却只能算对了一半. 5 ...

React之网易云音乐（实现唱片滚动以及lrc歌词滚动效果）

1.获取歌词以及处理

2.audio触发事件

React之网易云音乐（实现唱片滚动以及lrc歌词滚动效果）相关推荐

最新文章

热门文章