React实现(Web端)网易云音乐项目(六),错过了真的可惜呀
今天实现歌曲播放时,歌词随着滚动的效果
网易云原本的歌词是这样的
[00:00.000] 作曲 : 许嵩
[00:01.000] 作词 : 许嵩
[00:22.240]天空好想下雨
[00:24.380]我好想住你隔壁
[00:26.810]傻站在你家楼下
[00:29.500]抬起头数乌云
[00:31.160]如果场景里出现一架钢琴
[00:33.640]我会唱歌给你听
[00:35.900]哪怕好多盆水往下淋
[00:41.060]夏天快要过去}
[00:31.160]如果场景里出现一架钢琴
我们得把这个数据处理一下,转换成这样子的
在utils里面创建一个lrc-parse.js
const parseExp = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/export function parseLyric(lyricString) {const lineStrings = lyricString.split("\n");const lyrics = [];for (let line of lineStrings) {if (line) {const lrcContent = line.replace(parseExp, '').trim();const timeResult = parseExp.exec(line);const milliseconds = timeResult[3].length === 3 ? timeResult[3] * 1: timeResult[3]*10const lrcTime = timeResult[1] * 60 * 1000 + timeResult[2] * 1000 + milliseconds;lyrics.push({content: lrcContent,time: lrcTime})}}console.log(lyrics)return lyrics;}
通过调用这个parseLyric函数,把我们的歌词数组放进去即可
好了,现在开始准备写了
一.先把网络请求部分写好
player.js
export function getLyric(id) {return request({url: "/lyric",params: {id}})
}
二.把我们请求的数据放在redux中
先定义常量constants.js
export const CHANGE_CURRENT_LYRIC_INDEX = "player/CHANGE_CURRENT_LYRIC_INDEX";
然后去定义我们的state,reducer.js
import { Map } from 'immutable';import * as actionTypes from './constants';const defaultState = Map({currentLyrics: [],currentLyricIndex: -1
});function reducer(state = defaultState, action) {switch (action.type) {case actionTypes.CHANGE_LYRICS:return state.set("currentLyrics", action.lyrics);case actionTypes.CHANGE_CURRENT_LYRIC_INDEX:return state.set("currentLyricIndex", action.index);default:return state;}
}export default reducer;
再去actionCreators.js中封装方法
import * as actionTypes from './constants';
import { getLyric} from '@/services/player';
export const changeCurrentLyricIndexAction = (index) => ({type: actionTypes.CHANGE_CURRENT_LYRIC_INDEX,index
})
const changLyricListAction = (lyricList) => ({type: actionTypes.CHANGE_LYRIC_LIST,lyricList
})export const getLyric = (id) => {return dispatch => {getLyric(id).then(res => {const lyric = res.lrc.lyric;const lyricList = parseLyric(lyric);dispatch(changLyricListAction(lyricList));})}
}
之后就可以去组件中使用redux中的数据了
index.js
还是分三步
第一步,导入配置
import React, { memo, useRef, useEffect } from 'react';
import { useSelector, shallowEqual } from 'react-redux';
import classNames from 'classnames';import { scrollTo } from "@/utils/ui-helper";import { PannelWrapper } from './style';
scrollTo是我们封装的一个滚动js,用于歌词的滚动
export function scrollTo(element, to, duration) {if (duration <= 0) return;var difference = to - element.scrollTop;var perTick = difference / duration * 10;setTimeout(function() {element.scrollTop = element.scrollTop + perTick;if (element.scrollTop === to) return;scrollTo(element, to, duration - 10);}, 10);
}
第二步,逻辑代码
const { currentLyrics, currentLyricIndex } = useSelector(state => ({currentLyrics: state.getIn(["player", "currentLyrics"]),currentLyricIndex: state.getIn(["player", "currentLyricIndex"])}), shallowEqual);// other hooksconst panelRef = useRef();useEffect(() => {if (currentLyricIndex > 0 && currentLyricIndex < 3) return;scrollTo(panelRef.current, (currentLyricIndex - 3) * 32, 300)}, [currentLyricIndex]);
第三步,布局
return (<PannelWrapper ref={panelRef}><div className="lrc-content">{currentLyrics.map((item, index) => {return (<div key={item.time}className={classNames("lrc-item", { "active": index === currentLyricIndex })}>{item.content}</div>)})}</div></PannelWrapper>)
完事了,over
如果有不懂的,可以去我的github上下载完整代码,做了很多功能
github项目地址:https://github.com/lsh555/WYY-Music
React实现(Web端)网易云音乐项目(六),错过了真的可惜呀相关推荐
- React实现(Web端)网易云音乐项目(一),错过了真的可惜呀
首先肯定是搭建项目的结构了,通过脚手架安装这部分我就不说了 首先看项目的目录结构 assets:放我们的静态资源,图片,字体和公共初始样式等 common:放我们公共的JS文件 components: ...
- React实现(Web端)网易云音乐项目(三),错过了真的可惜呀
接着前面的继续写了,这篇博客就写这两个页面,下一篇就主要讲歌曲播放功能,进度条拉伸以及歌曲时间的变化了 先完成新碟上架Demo 一.第一步不用说肯定是先获取我们这个数据对吧 去到我们services文 ...
- React实现(Web端)网易云音乐项目(四),错过了真的可惜呀
今天就写一下歌曲播放这个功能,进度条拉伸以及歌曲时间的变化,当我们改变一个状态的时候,其他几个都相应改变,这个功能还是有一点复杂的- 就是这个,当我们可以播放,暂停,当我们播放的时候,进度条改变以及歌 ...
- React实现(Web端)网易云音乐项目(二),错过了真的可惜呀
接着上一篇来继续写了,这篇博客主要完成下面这部分 一.首先先完成这个轮播图了,那肯定需要请求数据了,所以我们先把网络请求部分先写好 在React里面我们也是通过axios来发送网络请求的,先安装 ya ...
- React实现(Web端)网易云音乐项目(五),错过了真的可惜呀
今天我们做歌曲的单曲循环,按序播放,随机播放以及通过手动点击上一首,下一首这些功能哈,下一篇博客就写我们歌词滚动功能 由于我每篇都和前面是联系在一起的,如果想获取整个项目,可以去我的github下载源 ...
- PC端网易云音乐播放云盘音乐时显示加载失败,自动调转下一首的解决方法
PC端网易云音乐播放云盘音乐时显示加载失败,自动调转下一首解决方法 注意: 一定要看看是不是和你的情况一样,不一样不要用这种方法!!! 具体情况: 我们经常会下载歌曲存到电脑文件夹里,然后通过网易云音 ...
- angular8 | 网易云音乐项目实战(一)
angular8 网易云音乐项目实战(一) 视频教程原地址:https://www.bilibili.com/video/av70355308 本文为学习笔记 从github上clone相关源码 cs ...
- Vue2 - 网易云音乐项目笔记(基于Vant UI组件库)
目录 一.项目技术 二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件 三.分析页面实现功能 1.路由页面准 ...
- Android项目实战之高仿网易云音乐项目介绍
这一节我们来讲解这个项目所用到的一些技术,以及一些实现的效果图,让大家对该项目有一个整体的认识,推荐大家收藏该文章,因为我们发布文章后会在该文章里面加入链接,这样大家找着就很方便. 目录 第1章 前期 ...
最新文章
- Gamma阶段第一次scrum meeting
- 离职成为自由开发者的第 100 天
- android内核模块签名,android安装内核module,提示Required key not available
- XSLT简单教程--XSLT的实例
- 征信逾期花钱就能修复?小心跳进骗子的坑里面去
- ps怎么对比原图快捷键_PS教程:P图前后,你还能认出这是同一个人吗?
- Excel、Python靠边站,这才是实现报表自动化最快的方法
- 比特币 Logo 背后有哪些历史及象征意义?Logo 上的“B”为什么会向右倾斜?
- 详解 Linux 中 apt 命令的使用
- Linux VIM编辑器详解
- 驱动调试(六)利用中断打印
- win10简洁之道(有效去广告)
- 华硕升级bios的问题
- Prettier your project
- docker-compose安装kafka
- arbexpress使用教程_信号发生器使用说明
- 外包项目注意事项问题
- R语言非线性拟合之多项式回归
- MATLAB箭头绘制 arrow3 函数与 quiver3 函数的实用教程
- 智创万物,数赢未来——如何助推数智时代的发展浪潮
热门文章
- c语言整数大小越界,整数越界相加并求第n个斐波纳契数(C语言实现)
- Python安装和导入cv库
- arnold如何设置鱼眼相机_【总结】如何看待默认渲染器、arnold阿诺德渲染器、Octane渲染器、Redshift等渲染器?...
- myeclipse中遇到代码run as后只有run configurations的情况
- 毕业了,等待我们的是什么?
- 后台获取访问端的真实ip地址
- A Game of Thrones(21)
- A Game of Thrones(104)
- 收集的几个国外好用的免费PS素材网站,国内可访问而且免费
- Windows开源Web服务器性能和压力测试工具