你的位置:首页 > Java教程

[Java教程]网页版酷我音乐


前言

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

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

分析

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

      

     通过分析html源码,得到以下结果

     1、最重要的两部分区域: 歌词区域 、 播放进度区域

     2、歌词区域是一个 div [] ,每一句歌词是一个p标签。

     3、播放进度区域是一个 div []

         而当前进度的位置是由子元素p[id="dq_processBar"]width决定的;并且width最大为140px。

解决思路

    需要实现的效果:按照播放进度,滚动条要保持同步,并且歌词部分要高亮显示。

    1、获取当前进度百分比 = p[id="dq_processBar"].style.width / 140

    2、获取歌词区域的scrollHeight值

    3、按照百分比,将滚动条滚动至指定位置。 div [].scrollTop = scrollHeight * 百分比

    4、获取到歌词集合,也就是歌词区域中的所有p标签。

    5、按照百分比,将当前p标签的颜色高亮显示。

具体实现

    1、manifest.json 配置(这里就不做说明了,具体详情点击这里)       

{  "manifest_version": 2,  "name": "酷我歌词定位",  "version": "1.0",  "description": "酷我歌词定位",  "icons": {    "16": "16.png",    "48": "48.png"     },    "content_scripts": [  {   "matches": ["http://bd.kuwo.cn/*"],      "js": ["js/kuwo.js"]  } ]}

View Code

    2、kuwo.js代码实现 

/** 将滚动条滚动至指定位置,字体高亮*/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 [].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

 

后记

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

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

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

    源码请点击这里