java歌词高亮显示滚动_逻辑清晰的 html 歌词同步滚动实现思路

效果展示

跟随歌曲时间同步滚动歌词,并实现高亮效果

自动播放

改变进度

总体思路

获取歌词

解析歌词

打印歌词

同步歌词

1. 获取歌词

用 ajax 和网易云的 api 获取的歌词资源.(涉及到跨域问题,这里不赘述,主要讲同步功能的思路)

2. 解析歌词

步骤:

1. 新建数组 lrcArray

2. 提取歌词 lrcGet

3. 用换行符把字符串 lrcGet分 割为数组 lrc

4. 遍历 lrc

其中,遍历 lrc 后的处理步骤

过滤

提取和转化时间

提取歌词

添加进数组 lrcArray

控制台返回的 lrcGet

lrc

js

var lrcArray = [];//新建数组,用于存放歌词

var lrcGet = data.lrc.lyric;//提取歌词

// console.log(lrcGet);

var lrc = lrcGet.split('\n');

// console.log(lrc);

$.each(lrc, function(i, item) {

//过滤空白文本

if (item.split(']')[1] == "" || item == "" || item.indexOf('作曲') !== -1 || item.indexOf('作词') !== -1) {

return true;

}

//转化时间

var timeStr = item.substring(item.indexOf("[") + 1, item.indexOf("]"));

var min = parseInt(timeStr.split(':')[0]) * 60;

var sec = parseFloat(timeStr.split(':')[1]);

var time = parseFloat((min + sec).toFixed(2));

//添加进数组

lrcArray.push({

t: time,

c: item.substring(item.indexOf(']') + 1)

});

});

3. 打印歌词

控制台返回处理后的数组lrcArray如下:

html代码

js

//显示歌词

//打印全部在页面

v