目录

  • 一、项目数据API接口地址
  • 二、实现播放页面效果
  • 三、实现思路
  • 四、实现思路代码
    • 1、发送ajax请求获取歌词
    • 2、 处理歌词格式
    • 3、判定该显示哪句歌词
    • 4、代码部分
  • 五、整个页面完整代码

一、项目数据API接口地址

API地址：https://neteasecloudmusicapi.js.org/#/
API文档说明地址：https://binaryify.github.io/NeteaseCloudMusicApi/#/

二、实现播放页面效果

三、实现思路

1、在路由跳转时携带ID参数发送ajax请求，根据id我们可以获取到歌曲的歌词

2、对获取到的歌词进行切分并以key:value的形式放入到对象中，将每个时间段获得的歌词存起来方便页面渲染，其中key为时间

3、同步一次显示一行歌词：如果当前播放的时间等于歌词的key值，那么就将当前歌词切换为这一句

四、实现思路代码

1、发送ajax请求获取歌词

// 获取-并调用formatLyric方法, 处理歌词const lyrContent  = await getLyricByIdAPI({id:this.id});const lyricStr = lyrContent.data.lrc.lyric

我们可以得到的歌词的样式

{lyric : "[00:00.000] 作词 : 张军磊[00:01.000] 作曲 : 李亚洲[00:02.000] 编曲 : 李博[00:03.000] 制作人 : 李亚洲[00:29.98]风越过高高的山岗......"}

2、 处理歌词格式

可以看到我们的歌词是带时间的文本，需要对其切分，并以键值对的形式存放到对象中，将每个时间段的歌词以key:value的形式储存起来方便页面渲染

① 匹配所有[]字符串以及里面的一切内容, 返回数组

let reg = /\[.+" />;  background: rgba(0, 0, 0, 0.5);  position: absolute;  left: 0;  top: 0;  right: 0;  bottom:0;}.song-wrapper {  position: fixed;  width: 247px;  height: 247px;  left: 50%;  top: 50px;  transform: translateX(-50%);  z-index: 10001;}.song-turn {  width: 100%;  height: 100%;  background: url("./img/bg.png") no-repeat;  background-size: 100%;}.start-box {  position: absolute;  width: 156px;  height: 156px;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  display: flex;  justify-content: center;  align-items: center;}.song-start {  width: 56px;  height: 56px;  background: url("./img/start.png");  background-size: 100%;}.needle {  position: absolute;  transform-origin: left top;  background: url("./img/needle-ab.png") no-repeat;  background-size: contain;  width: 73px;  height: 118px;  top: -40px;  left: 112px;  transition: all 0.6s;}.song-img {  width: 154px;  height: 154px;  position: absolute;  left: 50%;  top: 50%;  overflow: hidden;  border-radius: 50%;  transform: translate(-50%, -50%);}.m-song-h2 {  margin-top: 20px;  text-align: center;  font-size: 18px;  color: #fefefe;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}.lrcContent {  margin-top: 50px;}.lrc {  font-size: 14px;  color: #fff;  text-align: center;}.left-incon {  position: absolute;  top: 10px;  left: 10px;  font-size: 24px;  z-index: 10001;  color: #fff;}.ani {  animation: turn 5s linear infinite;}@keyframes turn {  0% {    -webkit-transform: rotate(0deg);  }  100% {    -webkit-transform: rotate(360deg);  }}</style>

api/index.js

// axios发送ajax请求网络请求import axios from "axios";// axios.create()创建一个axios对象const request = axios.create({    //基础路径，发请求的时候，路径当中会出现api，不用你手写baseURL:'http://localhost:3000',//请求时间超过5秒timeout:5000});//获取音乐播放地址export const getSongByIdAPI = (params)=>request({url:"/song/url/v1",params});//获取歌词export const getLyricByIdAPI = (params)=>request({url:'/lyric',params});//获取歌曲详情export const getMusicByIdAPI = (params)=>request({url:'/song/detail',params})

以上是实现网易云音乐播放页面并同步一次显示一行歌词代码，喜欢点点赞哦~~~