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

前言

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

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

分析

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

      

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

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

     2、歌词区域是一个 div [class="w_lrc_content"] ，每一句歌词是一个p标签。

     3、播放进度区域是一个 div [class="w_c_progress"]，

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

解决思路

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

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

    2、获取歌词区域的scrollHeight值

    3、按照百分比，将滚动条滚动至指定位置。 div [class="w_lrc_content"].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