网页版酷我音乐 ---- 谷歌插件之歌词定位

前言

通过百度搜索歌曲，进入到酷我听歌页面时，发现没有歌词定位功能。

突然想到自己可不可以实现这个效果，于是就有了这篇文章。

分析

放上我喜欢的一首歌《Hello》 。界面如下

/*
*  将滚动条滚动至指定位置，字体高亮
*/
function setScroll(){
//获取需要的dom元素
var lrc_content = document.getElementsByClassName('w_lrc_content')[0];//歌词区域
var processBar = document.getElementById('dq_processBar'); //当前进度
var p_list = lrc_content.getElementsByTagName('p');//歌词区域中的p集合

//1、获取当前进度百分比
var currentProgress =  processBar.style.width.split('px')[0]/140;
//2、获取歌词区域的scrollHeight值
var scrollHeight = lrc_content.scrollHeight;
// 3、按照百分比，将滚动条滚动至指定位置。 div [class="w_lrc_content"].scrollTop = scrollHeight * 百分比
lrc_content.scrollTop = scrollHeight * currentProgress;

//4、获取到歌词集合，也就是歌词区域中的所有p标签。
//5、先初始化所有p标签；然后按照百分比，将当前p标签的颜色高亮显示。
var currentP = Math.round( p_list.length * currentProgress);
for(var i=0; i< p_list.length ;i++){
p_list[i].style.color = '#999';  //将歌词初始化，恢复为默认值
}
p_list[currentP].style.color = 'green';
}

/*
* 定义一个计时器，每秒更新一次位置
*/
function setScroll_f5(){
setInterval(setScroll,1000);
}

setScroll_f5();

View Code

后记

实现效果后，发现不是很理想。

因为一首歌的部分，它会有前奏、中英文歌词等，导致定位不是很准确。

也没有其他好的思路，就不折腾了 ～(ˇˍˇ) ～

源码请点击这里